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之间添加某种链接，例如通过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，手机中的代码格式不是很好）

HTML： X X X X

JS： $（文件）。就绪（函数（）{ $（ '收藏夹'）。点击（函数（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');
     });

});

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

这段代码写在我的手机上，因此未经过彻底的测试。

自定义Jquery“Lightbox”无法正常工作

2 个答案: