[英]open full size image when clicking on thumbnail inside a div
I'm using on my website a page that displays images in a Grid. 我在我的网站上使用的页面在网格中显示图像。 What I'm trying to do is to open a full size version of my image when clicking on it. 我想做的是单击图像时打开图像的完整尺寸版本。 When clicking on an image, a div displays over the thumbnails, containing the same image but with different width and height, and the div has to be on the top left of my container grid. 单击图像时,div会显示在缩略图上方,其中包含相同的图像,但宽度和高度不同,并且div必须位于我的容器网格的左上方。 something like an overlay but I don't what's the best method to do it. 像是覆盖层之类的东西,但是我没有最好的方法。 i don't want to use a lightbox. 我不想使用灯箱。
my original size photos is : 我原来的照片是:
.photo_medias{width:233px;height:133px}
and the full size should be : 全尺寸应为:
.photo_medias{width:706px;height:364px}
here is a jsfiddle of my grid : http://jsfiddle.net/aaWLJ/9/ 这是我的网格的jsfiddle: http : //jsfiddle.net/aaWLJ/9/
can anybody help me with this ? 有人可以帮我吗?
thanks a lot for your help 非常感谢你的帮助
This is not the full answer (some css is needed to do it beautifully), but: 这不是完整的答案(需要一些CSS才能做到完美),但是:
JS: JS:
$(".mix").click(function(){
var photoSrc = $(this).find("img").attr("src");
$(this).append("<div class='big-img-cont'><img src='"+photoSrc+"' /></div>");
});
CSS: CSS:
.container .mix{
position: relative;
display: inline-block;
}
.photo_medias{width:233px;height:133px}
.big-img-cont{
position: absolute;
top:0px;
left:0px;
}
.big-img-cont img{
width:706px;height:364px
}
EDIT: 编辑:
regarding your second question (in your comment), you can do something like: 关于第二个问题(在您的评论中),您可以执行以下操作:
JS: JS:
$(".mix").click(function(){
var photoSrc = $(this).find("img").attr("src");
$(this).append("<div class='big-img-cont'><img src='"+photoSrc+"' /><a class='close-img' href='javascript:void(0);'>close</a></div>");
});
$(document).on( "click", ".close-img", function(){
$(".big-img-cont").remove();
} );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.