jQuery Lightbox Arrows and Keydown function

JavaScript
1

HI,

I have created a jQuery lightbox gallery without using a plugin and most of my code is working, save for a few issues. I cannot seem to get my next and previous arrows to iterate through the photos and captions properly. Sometimes the caption will iterate (only once) and sometime the photo will iterate only one time. I also have created a keydown function to try to enable keyboard navigation for my gallery, but it is not working properly. I was wondering if anyone could see what I am either missing or doing wrong. I feel like I am close. Thanks in advance to anyone who can help me!

Here is my project on Github:

http://firebuggirl.github.io/lightgallery/

2

Hi,

I’m only moderate at jquery but I can see that you are targeting the wrong element with .next(). The 'next element of the anchor is empty because there is only one anchor in the list. You need to go back to the parent list and then find the next list element and then find the anchor in that list. You actually have commented it correctly saying go back to parent but you did not code it :smile:

You also need to remove the selected item and it to the next one.

e.g.

$( "body" ).on( "click",'#rightArrow', function() {

  var $activeImg = $(".selected"); 
  var $captionText = $(".selected").children("img").attr("alt");
  var $imageNext = $activeImg.closest('li').next('li').find('a').addClass('selected').attr("href");
  $activeImg.removeClass('selected');

  $image.attr("src", $imageNext);
  $captionNext = $captionText;
  $caption.text($captionNext);
 
});

Then do similar for the left arrow.

1 Like
3

Hi Paul,

Thanks so much for responding. This is a huge help. I’m glad to hear that I was at least headed in the right direction. The arrows are now iterating through the photos and captions, save for one small bug: when I click on either arrow the 1st photo changes, but the caption does not change until I iterate to the 3rd photo (then I get the caption for #2) on the 2nd arrow click. I’m thinking that it has something to do with an index of 0 needing to be set (?). Maybe I could use an if/else statement to work this out. I’m going to try and see what happens.

$activeImg.removeClass(‘selected’);

This is key for being able to iterate beyond the (immediate) next image and caption. Thanks for this!

4

You are selected the caption of the previously selected item but you need the caption from the new item. You need to grab it once it becomes selected (i.e. the selected class is added to the new item).

e.g.

$( "body" ).on( "click",'#rightArrow', function() {

  var $activeImg = $(".selected");
  var $captionText = "";
  var $imageNext = $activeImg.closest('li').next('li').find('a').addClass('selected').attr("href");
  $activeImg.removeClass('selected');
  $captionText = $(".selected").children("img").attr("alt");

  $image.attr("src", $imageNext);
  $captionNext = $captionText;
  $caption.text($captionNext);

});

$( "body" ).on( "click",'#leftArrow', function() {

  var $activeImg = $(".selected");
  var $captionText = "";
  var $imagePrev = $activeImg.closest('li').prev('li').find('a').addClass('selected').attr("href");
  $activeImg.removeClass('selected');
  $captionText = $(".selected").children("img").attr("alt");

  $image.attr("src", $imagePrev);
  $captionPrev = $captionText;
  $caption.text($captionPrev);



});

You will then need to do some detection for when you reach the end of the images and either start again or fade the arrow out. I;ll leave that as an exercise for you to work out :smile:

1 Like
5

The caption text is now moving in sync with the images. Yay!

var $captionText = $activeImg.closest(‘li’).next().find(‘a’).addClass(‘selected’).children(“img”).attr(“alt”);

Now on to the rest.

Thanks so much for all of your help!

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.