单击时显示特定图像答案

【问题标题】：Show a specific image on click单击时显示特定图像
【发布时间】：2013-09-09 23:10:06
【问题描述】：

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

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

【问题讨论】：

为什么你的 jQuery 被转义了？
你的 CSS 有 ID #showimagediv（如果你有更多，那就错了）--- 当你使用 CLASS $(".showimagediv").show();在你的 jQuery 中
哦，那是因为它是 php 脚本的一部分。那是错的吗？而且我可以看到我的问题被否决了，是我写错了吗？
此外，您无需转义\"，而无需解释该DIV到底在哪里，是一个还是多个等等。如果您想要一个快速准确的答案，请更准确
我不知道为什么它被否决了，可能是因为你错过了一些细节......比如返回的图片 URL 和你感兴趣的部分等等等等

标签： jquery html css image

【解决方案1】：

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

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

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

【讨论】：

@user68621 - 没问题！
在 div 中填充图像时是否可以调整图像大小？目前显示在 div 上的图像非常小，基本上是缩略图的大小。
@AnitaMathew - 当然，fullImage 类已添加到完整图像中，因此只需使用 CSS 调整其大小。
@adeneo 你能看看这个问题吗：stackoverflow.com/questions/54530797/…。放大时图像失去清晰度..非常模糊

【解决方案2】：

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

如果你说的是正确的，前一个是图像，这意味着DIV是.next()它！

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

.showimagediv {

jQuery

$(function() { // DOM ready shorthand

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

});

【讨论】：

【解决方案3】：

首先，您的 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);
    });
});

【讨论】：