javascript - 单击 div 内的缩略图时打开全尺寸图像

Question

我在我的网站上使用一个在网格中显示图像的页面。我想要做的是在点击它时打开我的图像的完整尺寸版本。单击图像时，缩略图上方会显示一个 div，其中包含相同的图像但宽度和高度不同，并且 div 必须位于我的容器网格的左上角。类似于覆盖，但我不知道什么是最好的方法。我不想使用灯箱。

我的原始尺寸照片是:

.photo_medias{width:233px;height:133px}

完整尺寸应该是:

.photo_medias{width:706px;height:364px}

这是我的网格的一个 jsfiddle:http://jsfiddle.net/aaWLJ/9/

谁能帮我解决这个问题？

非常感谢你的帮助

Answer 1

这不是完整的答案(需要一些 css 才能做得漂亮)，但是:

JS:

$(".mix").click(function(){
    var photoSrc = $(this).find("img").attr("src");
    $(this).append("<div class='big-img-cont'><img src='"+photoSrc+"' /></div>");
});

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
}

编辑:

关于你的第二个问题(在你的评论中)，你可以这样做:

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();
  } );