单击显示特定图像 [英] Show a specific image on click

问题描述

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

I am trying to get a div to show when a picture is clicked. This div should contain the clicked picture only larger. I can't get this to work though. I've tried a lot of different things and now I hope someone can help me out or give me some pointers.

首先我有我的html图像，它是在一个php while循环：

First I have my html image, which is generated in a php while loop:

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

然后我有我的CSS我希望在点击上一张图片时显示div：

Then I have my CSS for the div I want to be shown on click of the previous image:

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

最后我尝试了一些Jquery代码：

And last I have some Jquery code I tried to make:

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

我知道我可以使用此行获取所点击图片的地址：

I know I can get the address of the clicked image be using this line:

$(this).attr('src')

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

I don't know how to use it in a div, shown when an image is clicked

我希望有人明白我的意思并且可以帮助我找到正确的方向。

I hope someone understands what I mean and can help me in the right direction.

推荐答案

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

Get the source from the thumbnail and create a new image to be inserted into the DIV where you're trying to display the clicked image :

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

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

这篇关于单击显示特定图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！