カスタムJquery "ライトボックス"が動作しません

Question

ライトボックスを実際のものに似せるために私はYoutubeのチュートリアルを使用しました。私が4番目の写真になるまで、それは完璧に機能しました。セット内のいずれかのピクチャをクリックするたびに、4番目のピクチャのみが表示されます。どんな種類の助けでも大歓迎です！前もって感謝します。ここでは、ライトボックスとそのアニメーションに関するコードは次のとおりです。

ビデオ： 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

：ように、rel属性によって、たとえば.lightboxと■はとの間のリンクのいくつかの種類を追加してみてください。ここで

がクリックされた画像のみを示し、コードの更新バージョンです： https://jsfiddle.net/khurmtpv/1/

（jsfiddleを表示、コードのフォーマットは、携帯電話から素晴らしいではありません）

HTML： X X X X

J S： $（document）.ready（function（）{ $（ '。ライトボックス'）をクリックします（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

はテストしていませんが、私は第四の表示が、すべてではないだろうと思います。あなたが特定のボックスを指していないという事実のために最後のものが表示されるのはなぜですか？あなたは1つだけでなく、互いの上に絵の全てを見せている

<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'); 
});