2

我试图让一个 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 中使用它，在单击图像时显示

我希望有人能理解我的意思，并能帮助我朝着正确的方向前进。

4

3 回答 3

6

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

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

        $('.showimagediv').html(img).show();
    });
});
于 2013-09-09T23:20:14.970 回答
1

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

如果你说的是对的，前一个是图像，那意味着DIV就是.next()它！

在您的CSS中为您的 DIV 使用类：

.showimagediv {

jQuery

$(function() { // DOM ready shorthand

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

});
于 2013-09-09T23:18:57.307 回答
0

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

因此，首先您应该确定 showimagediv 是 ID 还是 DIV，而不是更正您的 CSS 或 jQuery。

然后，将您的 img 标签放在 a 中，使其变为“可点击”。href="#" 表示单击它时不会发生任何事情。

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

因此，当您单击链接内的图像时，它会将显示值从none更改为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);
    });
});
于 2013-09-09T23:45:41.370 回答