自定义 Jquery“灯箱”不起作用

Question

我使用 Youtube 上的教程制作了一个与实际灯箱相似的灯箱，因为我永远无法让实际灯箱工作。它工作得非常好，直到我看到第四张照片。每次我单击集合中的任何图片时，只会显示第四张图片。任何形式的帮助将不胜感激！先感谢您。以下是有关灯箱及其动画的代码：

视频： https://www.youtube.com/watch?v=k-uonF7Gdgw

CSS:
.pic {
position: absolute;
left: 340px;
top: 100px;
z-index: 5;
border: 2px solid white;
border-radius: 5px;
}

.pic2 {
position: absolute;
left: 600px;
top: 100px;
z-index: 5;
border-radius: 5px;
border: 2px solid white;
}

.pic3 {
position: absolute;
left: 340px;
top: 350px;
z-index: 5;
border-radius: 5px;
border: 2px solid white;
}

.pic4 {
position:absolute;
left: 600px;
top: 350px;
z-index: 5;
border-radius: 5px;
border: 2px solid white;
}

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

.box {
position: absolute;
top: 10%;
left: 28.2%;
width: 500px;
height: 500px;
background: #ffffff;
z-index: 51;
padding: 10px;
-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;
}

.closebutton {
float: right;
margin-right: 6px;
cursor: pointer;
}

.picinside {
position: absolute;
top: 0px;
left: 0px;
border-radius: 5px;
border: 2px solid white;
}

HTML:
<div class="backdrop"></div>
 <div class="box"><img class="picinside" style="width: 500px; height: 500px;" src="pic1"><div class="close">X</div></div>
 <div class="box"><img class="picinside" style="width: 500px; height: 500px;" src="pic2"><div class="close">X</div></div>
 <div class="box"><img class="picinside" style="width: 500px; height: 500px;" src="pic3"><div class="close">X</div></div>
 <div class="box"><img class="picinside" style="width: 500px; height: 500px;" src="pic4"><div class="close">X</div></div>
 <a href="#" class="lightbox pic"><img style="width: 200px; height: 200px;" src="pic1thumbnail"></a>
 <a href="#" class="lightbox pic2"><img style="width: 200px; height: 200px;" src="pic2thumbnail"></a>
 <a href="#" class="lightbox pic3"><img style="width: 200px; height: 200px;" src="pic3thumbnail"></a>
 <a href="#" class="lightbox pic4"><img style="width: 200px; height: 200px;" src="pic4thumbnail"></a>

jquery:

<script type="text/javascript">
$(document).ready(function(){

   $('.lightbox').click(function(){
       $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
       $('.box').animate({'opacity':'1.00'}, 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

您将所有图片叠加显示，而不仅仅是一张。

这是您的代码的更新版本，仅显示点击的图像： https://jsfiddle.net/khurmtpv/1/

（查看 jsfiddle，手机上的代码格式不太好）

html: X X X X

JS： $(文档).ready(函数(){ $('.lightbox').click(function(e){ var $this = $(this);

       var target = $this.data('target');
       $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
       $('.box.' + target).animate({'opacity':'1.00'}, 300, 'linear').addClass('active');
       $('.backdrop, .box.' + target).css('display', 'block');

        e.preventDefault();
   });
   $('.close, .backdrop').on('click', function(){
     $('.backdrop, .active').css({
             display: 'none',
             opacity: 0
       }).removeClass('.active');
     });

});

它为每个缩略图链接设置数据目标，然后使用它来确定要显示哪个全尺寸图像。

此代码是在我的手机上编写的，因此尚未经过非常彻底的测试。

Answer 2

尚未测试，但我认为不会显示第四个，而是全部显示。一个接一个，这就是为什么您会看到最后一个，因为您不是指向特定的 .box 而是所有这些。尝试在 .lightbox 和 .box 之间添加某种链接，例如通过 rel 属性：

<div class="box box-1">[...]</div>
<a href="#" class="lightbox" rel="box-1">[...]</a>


$('.lightbox').click(function(){
   $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
   $('.'+$(this).attr('rel')).animate({'opacity':'1.00'}, 300, 'linear');
   $('.backdrop, .box').css('display', 'block');
});