jquery - 单击时显示特定图像

Question

我试图让一个 div 在点击图片时显示。这个 div 应该只包含更大的点击图片。我无法让它工作。我已经尝试了很多不同的事情，现在我希望有人能帮助我或给我一些指示。

首先我有我的 html 图像，它是在 php while 循环中生成的:

<img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>

然后我有了我想要在点击上一张图片时显示的 div 的 CSS:

#showimagediv {
    display: none;
    width: 500px;
    height: 500px;
    margin-left: 100px;
    margin-top: -300px;
    position: fixed;
    background-color: #f00;
    z-index: 6;
}

最后我有一些我尝试编写的 Jquery 代码:

<script>
$(document).ready(function() {
    $(\"#gallerythumbnail\").click(function( event ) {
        $(\".showimagediv\").show();
    });
});
</script>

我知道我可以使用这一行获取被点击图像的地址:

$(this).attr('src')

我不知道如何在点击图片时显示的div中使用它

我希望有人能理解我的意思，并能在正确的方向上帮助我。

Answer 1

从缩略图获取源并创建一个新图像以插入到您尝试显示点击图像的 DIV 中:

$(document).ready(function() {
    $('.gallerythumbnail').on('click', function() {
        var img = $('<img />', {
                      src     : this.src,
                      'class' : 'fullImage'
                  });

        $('.showimagediv').html(img).show();
    });
});