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

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

我的原版照片是：

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

全尺寸应为：

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

以下是我的网格的JSFIDLE：

有人能帮我吗

---

非常感谢您的帮助

这不是完整的答案（需要一些css才能完美完成），但是：

JS:

编辑：

关于你的第二个问题（在你的评论中），你可以这样做：

JS:

$（“.mix”）。单击（函数（）{
var photoSrc=$（this.find（“img”）.attr（“src”）；
$（此）。追加（“”）；
});
$（文档）。在（“单击“，”上。关闭img”，函数（）{
$（“.big img cont”）.remove（）；
} );

这里有一些帮助：Fancybox在这里。但是你不喜欢灯箱的风格。。。不过，您可以根据自己的需要配置一点。谢谢@Geordee-naliyathhanks@Shay-Elkayam，这绝对是我想要使用的解决方案。。。但是，当点击链接文本“close”时，是否可以关闭图像？非常感谢你的帮助！谢谢@Shay Elkayam但关闭按钮不起作用。。。你知道为什么吗？这是动态创建的，我错了。您可以使用$（document）.on（“click”，“.close img”，function（）{$（“.big img cont”）.remove（）；}）；相反

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

.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
}

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