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

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

1 个答案: