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

Answer 2

然后我点击了上一页图片
我想要显示的div

如果你说的是正确的，上一个就是图片，这意味着DIV对它是.next()！

在 CSS ：

中使用DIV课程

.showimagediv {

的jQuery

$(function() { // DOM ready shorthand

    $(".gallerythumbnail").click(function() {
          $(this).next('.showimagediv').show(); // or you want .toggle() ?
    });

});

Answer 3

首先，您的CSS代码#showimagediv。＃代表ID属性。您的jQuery代码使用.showimagediv。。代表CLASS属性。

首先你应该决定showimagediv是一个ID还是DIV，而不是纠正你的CSS或你的jQuery。

然后，把你的img标签放在里面，这样就可以点击了＃39;。 HREF =＃＆34;＃＆＃34;意味着单击它时不会发生任何事情。

<a href="#" id="image">
    <img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>
</a>

并将您的jQuery函数更改为此（如果是类属性则使用div.showimagediv;如果是id属性，则使用div＃showimagediv）：

$(function() {
    $("a#image").click(function() {
        $("div.showimagediv").css("display", "block");
    });
});

因此，当您点击链接中的图片时，它会将显示值从无更改为阻止。这不会切换，它会显示一次而不会再次隐藏。

如果你需要切换，你需要在jQuery函数中控制它，如下所示：

$(function() {
    $("a#image").click(function() {
        var actualDivDisplay = $("div.showimagediv").css("display");
        var newDivDisplay = "";

        if (actualDivDisplay == "none") {
            newDivDisplay = "block";
        } else {
            newDivDisplay = "none";
        }

        $("div.showimagediv").css("display", newDivDisplay);
    });
});

单击显示特定图像

3 个答案: