我有一堆图片,我想在点击它们时显示更大版本的图片。我现在拥有的:
<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>
和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();
});
});
});
现在,我如何获取图像的值,将其传递给数组然后传递给'background-image': 'url(' + imageData[] + ')'
?此外,如何调整#newimg
尺寸以适合图像?因为width
和height 100%
应该只使用no-reapeat,所以我在哪里放置no-reapeat?
该代码可以工作但只有固定的高度/宽度和特定的img背景i。即1.jpg
。
jsfiddle中的工作示例:
http://jsfiddle.net/bx27sjLL/
非常感谢!