Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Help Lightbox - jQuery

Im making a lightbox with prev and next, that doesn't exactly work as i want. I did it before working, but It was targeting the small screen.

codepen

1 Answer

rydavim
rydavim
18,811 Points
rydavim
rydavim
18,811 Points

You seem to have your click function for the button nested inside another click function, which you probably didn't intend. Moving the following block of code out of the function it was nested inside fixed the problem for me of the button not doing anything.

$(nextBtn).click(function(){
        if ($(".gallery-box-wrapper div:visible").next().length != 0)
            $(".gallery-box-wrapper div:visible").next().show().prev().hide();
        else {
            $(".gallery-box-wrapper div:visible").hide();
            $(".gallery-box-wrapper div:first").show();
        }
        return false;
  });

Now, after doing that it probably still doesn't work the way you intend. Your code seems to be working on the normal images on the page, instead of the lightbox view. Let me know if you have trouble with tweaking that.

The jQuery Basics course has a section on image lightboxes that might help you cement the base code, and you could add navigation function from there.

Happy coding! :)

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

:D Thank you

I would say im getting familiar with jQuery, so im trying many new things. I did all of the jQuery courses, as im doing the same technique that its aplied there. Actually, theres nothing thag goes beyond the basics apart from displayin overlay and showing image. I can now show text and do it all on my own :D It's just things like next, prev etc.. well im trying. iv spend many hours id guess, trying lots of new things, and i did try everything, nested and not nested, and well it didnt work : p i think im somewhere close, but uh, still need more.

Yeah, im having a problem :D

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

If you check it now. I don't know how to put the variable so it changes in the overlay and doesn't hide the other ones when i do u know.. but on the other hand i can know uhh, i just need a lil help :D

rydavim
rydavim
18,811 Points
rydavim
rydavim
18,811 Points

You'll need to update the src attribute of the overlay image, instead of working on the gallery images. Try something like...

$(nextBtn).click(function(){
  var $images = $('.gallery-box-wrapper img'); // A list of the images in your gallery.
  var $currentImg = $('.gallery-box-wrapper img[src="' + $('#overlay img').attr('src') + '"]'); // The current img being overlayed.
  var $nextImg = $($currentImg.closest('div').next().find('img')); // The next img in the gallery.

  if ($nextImg.length > 0) { // If there is a next img, display it.
    $('#overlay img').attr('src', $nextImg.attr('src'));
  } else { // Otherwise, if you've reached the end, loop back to the first img.
    $('#overlay img').attr('src', $($images[0]).attr('src'));
  }
});

That might not be the most elegant way to do it, but it should get you started. I tried to leave comments, but let me know if anything doesn't make sense.