Benutzerdefinierte Jquery "Lightbox" funktioniert nicht

Question

Ich habe ein Tutorial auf Youtube verwendet, um eine Lightbox ähnlich der tatsächlichen zu machen, weil ich nie das eigentliche zum Arbeiten bekommen konnte. Es funktionierte völlig in Ordnung, bis ich zum vierten Bild kam. Jedes Mal, wenn ich auf eines der Bilder im Set klicke, wird nur das vierte Bild angezeigt. Jede Art von Hilfe würde sehr geschätzt werden! Vielen Dank im Voraus. Hier ist der Code in Bezug auf den Leuchtkasten und seine Animation:

Video: 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

Sie alle Bilder auf der jeweils anderen, nicht nur eine zeigt. Hier

ist eine aktualisierte Version des Codes, die nur das Bild zeigt geklickt: https://jsfiddle.net/khurmtpv/1/

(Sehen Sie sich die jsfiddle, Code-Formatierung von einem Telefon ist nicht groß)

html: X X X X

J S: $ (Dokument) .ready (Funktion() { $ ('. Leuchtkasten'). Click (Funktion (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'); 
    }); 

}); 

Sie legt das Datenziel für jeden Miniaturlink fest und bestimmt anhand dieses Werts, welches Bild in voller Größe angezeigt werden soll.

Dieser Code wurde auf meinem Handy geschrieben, wurde also nicht sehr gründlich getestet.

Answer 2

nicht getestet, aber ich denke nicht, der vierten Willen Display aber alle. Einer über den anderen, deshalb werden Sie den letzten sehen, weil Sie nicht auf eine bestimmte .box zeigen, sondern auf alle. Versuchen Sie, eine Art von Verbindung zwischen dem .lightbox und .box zum Beispiel durch rel-Attribut, so dass:

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