1
Я хочу изменить размер изображения до размера оригинала, когда я нажимаю на изображения. link http://plnkr.co/edit/JBTE1RAEZburUTRkVrLE?p=preview. Этот образец, когда вы нажимаете на изображение, появляется, но тот же исходный размер. Как я могу установить его больше.Изменение размера изображения при всплытии
Ниже Код:
// Code goes here
function view(src)
{
var viewer = document.getElementById("viewer");
viewer.innerHTML ='<img src="' + src + '" id="img"/>';
var img = document.getElementById("img");
var iw=0, ih=0;
var dw=0, dh=0;
img.onload=function(){
document.getElementById("ov").style.display="block";
viewer.style.display="block";
document.getElementById("nav").style.display="block";
iw = viewer.offsetWidth;
ih = viewer.offsetHeight;
dw = window.innerWidth;
dh = window.innerHeight;
viewer.style.top = parseInt(dh/2-ih/2) + "px";
viewer.style.left = parseInt(dw/2-iw/2) + "px";
};
}
function hide2()
{
document.getElementById("viewer").style.display="none";
document.getElementById("ov").style.display="none";
\t \t \t \t document.getElementById("nav").style.display="none";
}/* Styles go here */
ul.image-list{
padding:0;
margin: 0;
list-style: none;
}
ul.image-list li{
display: inline-block;
}
ul.image-list li img{
width: 190px;
min-width: 70px;
transition: all ease 0.4s;
}
ul.image-list li img:hover{
cursor: pointer;
opacity: 0.5;
border: 1px solid #000;
}
.pup
{
width: 100%; height: 100%;
background: #666;
opacity: 0.7;
position: fixed;
top: 0px; left: 0px;
z-index: 111;
display: none;
}
.viewer{
background: #666; padding: 12px;
position: fixed; z-index: 222;
text-align: center;
display: none;
}
#nav{
display: none;
z-index: 333;
color: #FFF;
position: relative;
cursor: pointer; text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid gallery">
<div class="row-fluid">
<div class="col-sm-12">
<h3 class="text-info">Photo Gallery</h3>
</div>
</div>
<div class="row-fluid">
<div class="col-sm-12">
<ul class="image-list">
<li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
</ul>
<div class="slider-controls" id="nav">
<span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span>
<span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span>
</div>
</div>
</div>
</div>
<div class="pup" id="ov" onclick="hide2()">
</div>
<div class="viewer"id="viewer">
</div>
</body>
</html>