Custom Jquery "Lightbox" not working

Question

I used a tutorial on Youtube to make a lightbox similar to the actual one because I could never get the actual one to work. It worked perfectly fine until I got to the fourth picture. Every time I click on any of the pictures in the set only the fourth picture is displayed. Any kind of help would be much appreciated! Thank you in advance. Here's the code regarding the lightbox and its 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>

score 0 · Answer 1 · answered Oct 25 '16 at 21:15

Have not tested but I think not the fourth will display but all. One over another that is why you will see the last one due to the fact you are not pointing to a specific .box but all of them. Try adding some kind of a link between the .lightbox and .box for example by rel attribute so that:

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

Thank you so much! I'll test it out! – Era of Discord Oct 26 '16 at 17:34 — Era of Discord, Oct 26 '16 at 17:34

score 0 · Accepted Answer · answered Oct 25 '16 at 22:00

You are showing all of the pictures on top of each other, not just one.

Here is an updated version of your code that only shows the image clicked: https://jsfiddle.net/khurmtpv/1/

(View the jsfiddle, code formatting isn't great from a phone)

html: X X X X

JS: $(document).ready(function(){ $('.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');
     });

});

It sets data-target for each thumbnail link, then uses this to determine which full sized image to show.

This code was written on my phone, so has not been tested very thoroughly.

Thank you so much! I'll test it out and let you know what happens! — Era of Discord, Oct 26 '16 at 17:33

Custom Jquery "Lightbox" not working

2 Answers2