单击显示特定图像

Question

我试图让一个div显示何时点击图片.此div应包含仅更大的点击图片.我不能让这个工作.我已经尝试了很多不同的东西,现在我希望有人可以帮助我或给我一些指示.

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

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

然后我有我的CSS我想要点击上一个图像显示div:

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