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