自定义 Jquery "Lightbox" 无效

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

没有测试过，但我认为不是第四个会显示，而是所有。一个接一个，这就是为什么您会看到最后一个，因为您没有指向特定的 .box，而是指向所有这些。尝试在 .lightbox 和 .box 之间添加某种 link，例如通过 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');
});

Answer 2

您显示的是所有图片都在彼此之上，而不仅仅是一张。

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

（查看 jsfiddle，phone 中的代码格式不是很好）

html: X X X X

JS: $(文档).ready(函数(){ $('.lightbox').click(函数(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');
     });

});

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

这段代码是在我的 phone 上写的，所以没有经过很彻底的测试。

自定义 Jquery "Lightbox" 无效

Custom Jquery "Lightbox" not working

html

css

jquery

lightbox