JQuery - 根据单击的图像打开不同的图片

Question

因此，我创建了这个脚本(尽管有教程，但我对 JQuery 还很陌生)，以便在单击时打开图片的灯箱。我没有想到的是，这个脚本无论点击的是哪一张，都只会打开一张图片。任何人都可以为我指明正确的方向，让我能够弄清楚如何更改此脚本，以便当我单击图片时，它会打开正确的完整图片。全部代码如下。

HTML

<div class="backdrop"></div>
<div class="box">
    <div class="close">X</div>
    <img class="big_img" src="../pics/placeholder.png">
</div>

<div>
    <ul class="body">
        <li class="responsive">
            <div class=image>
                <a href="#" class="lightbox"><img class="gallery" src="../pics/placeholder.png"></a>
                <p>Test</p>
            </div>
        </li>
    </ul>
    </div>

CSS

.backdrop {
  position: absolute;
  text-align: center;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .0;
  filter:alpha(opacity=0);
  z-index: 50;
  display: none;
}

.box {
  top: 20%;
  position: fixed; /* Lightboxes usually use position: fixed. */
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  background: #ffffff;
  z-index: 51;
  padding: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #444444;
  -webkit-box-shadow: 0px 0px 5px #444444;
  box-shadow: 0px 0px 5px #444444;
  display: none;
}

.close {
  position: fixed;
  float: right;
  padding-left: 10px;
  padding-top: 4px;
  margin-top: 4px;
  cursor: pointer;
  font-family: sans-serif;
}

.big_img {
  margin: 5px;
}

JQuery

<script type="text/javascript">
    $(document).ready(function() {
        $('.lightbox').click(function(){
            $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
            $('.box').animate({'opacity':'1'}, 300, 'linear');
            $('.backdrop, .box').css('display', 'block');
        });

        $('.close').click(function(){
            close_box();
        });

        $('.backdrop').click(function(){
            close_box();
        })
    });

    function close_box()
    {
        $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
                $('.backdrop, .box').css('display', 'none');
            });
    }
</script>

Answer 1

您想要做的是在单击相应的缩略图时打开大图片。但是您没有在任何地方提到单击了哪个缩略图，因此您的函数不知道要打开哪个缩略图。此外，您的函数始终打开相同的图像，您应该更改图像的 src 。试试这个

<a href="#" class="lightbox"><img class="gallery thumbnail" src="../pics/placeholder.png"></a>

并在 jquery 中执行此操作

$(".thumbnail").click(function() {
   var image = $(this).attr("src");
   $('.big_img').attr("src",image);
   $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
   $('.box').animate({'opacity':'1'}, 300, 'linear');
   $('.backdrop, .box').css('display', 'block');
});

休息也是一样的。

希望这有帮助。如果有任何疑问，请随时询问。