[英]Using image value to choose an image from an array and display it (Javascript)
I have a bunch of pictures and I want to display a bigger version of them when they are clicked. 我有一堆照片,当我单击它们时,我想显示它们的放大版本。 What I have right now: 我现在所拥有的:
<div class="gallery">
<div>
<img src="content/imggallery/img1.jpg" class="oldimg" value="0">
</div>
<div>
<img src="content/imggallery/img2.jpg" class="oldimg" value="1">
</div>
<div>
<img src="content/imggallery/img3.jpg" class="oldimg" value="2">
</div>
</div>
And Javascript/jQuery: 和Javascript / jQuery:
$(function() {
var docHeight = $(document).height();
var imageData = new Array (3);
imageData[0]="0.jpg";
imageData[1]="1.jpg";
imageData[2]="2.jpg";
$(".oldimg").click(function(){
$("body").append("<div id='overlay'></div>");
$("body").append("<div id='newimg'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'fixed',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)',
'filter': 'alpha(opacity=50)',
'z-index': 1000
});
$("#newimg")
.css({
'position': 'fixed',
'top': '50%',
'left': '50%',
'background-image': 'url(' + imageData[] + ')',
'transform': 'translate(-50%, -50%)',
'width': '100%',
'height': '100%',
'z-index': 1010
});
$("#newimg").click(function(){
$("#newimg").remove();
$("#overlay").remove();
});
});
});
Now, how do I get the value of the image, pass it to the array and then to 'background-image': 'url(' + imageData[] + ')'
? 现在,如何获取图像的值,将其传递给数组,然后传递给'background-image': 'url(' + imageData[] + ')'
? Additionally, how do I adjust the #newimg
size to fit the image? 此外,如何调整#newimg
大小以适合图像? Because width
and height 100%
should do it but only with no-reapeat, so where exactly do I put no-reapeat? 因为width
和height 100%
应该这样做,但只能在不重复的情况下进行,所以我到底在哪里放置不重复的?
The code works but only with fixed height/width and a specific img background ie 1.jpg
. 该代码仅适用于固定的高度/宽度和特定的img背景,即1.jpg
。
Working example in jsfiddle: http://jsfiddle.net/bx27sjLL/ jsfiddle中的工作示例: http : //jsfiddle.net/bx27sjLL/
Big thanks! 太谢谢了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.