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