JQuery help in understanding steps needed to create a next button for a lightbox

Question

Hello, I am trying to work through creating the code needed for my next and previous buttons to work in JQuery, on a light box photo gallery. bellow is my thought process, but I am missing steps, or on the wrong track!. I am keen to learn how to work out how to do this, if anyone has the time to explain the steps, and what I am missing, it would be appreciated.

button thoughts:

//button attempt
var $buttonNext = $("<button> > </button>");
var $buttonPrevious = $("<button> < </button>");

//var $thisImage = $(this).attr("img");
//var $nextImage =$thisImage.next("img");
//var $previousImage


 //trying to get buttons to function 

//$("$buttonNext").click(function(){
    $thisImage.remove();
    $thisImage.next("img");
    $nextImage.show();
});

here is my lightbox code.

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
//button attemp
var $buttonNext = $("<button> > </button>");
var $buttonPrevious = $("<button> < </button>");

//var $thisImage = $(this).attr("img");
//var $nextImage =$thisImage.next("img");
//var $previousImage


//an image
$overlay.append($image);

//a caption to overlay
$overlay.append($caption);

//attemting to add buttons.  This worked now need to get them to scroll fowards and back.

$overlay.append($buttonPrevious);
$overlay.append($buttonNext);


// add an overlay
$("body").append($overlay);

// capture the click event on a link to an image

$("#imageGallery a").click(function(event) {
  event.preventDefault();
 var imageLocation = $(this).attr("href");


//update the overlay with the image linked in the link
  $image.attr("src", imageLocation);

// Show the overlay
  $overlay.show();


//Get child alt attribute and set caption

 var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);

} );

//When overlay is clicked

$overlay.click(function() {
  overlay.hide();
})


 //trying to get buttons to function 

//$("$buttonNext").click(function(){
    $thisImage.remove();
    $thisImage.next("img");
    $nextImage.show();
});

Answer 1 · 2016-10-17T18:39:19Z

October 17, 2016 6:39pm

Hi Tracy Excell and Mary Hawley ,

I haven't implemented this myself but I can try walking you through one way you can approach it.

One thing you'll have to decide is is you want it to be circular or you can only go forwards and backwards. In other words, what should happen when you're on the first image and you click the previous button? It can either wrap around to the last image or do nothing.

The lightbox is completely separate from the thumbnail list so there is no way to traverse through the images based off of the one that is showing in the lightbox.

One thing that you can do is keep track of the index of which image is currently being shown. Then you can adjust that index up or down in the prev and next click handlers in order to figure out which image you're getting next.

Near the top of your code with the other variable declarations you can declare an index variable. There's no point in initializing it right now because you don't know what thumbnail the user will click on to start the lightbox. It will also be helpful to have a variable storing the length of the gallery.

var index;
var galleryLength = $("#imageGallery li").length;

The click handler for the links is where you want to set the value of the index variable. jQuery's .index() method can be used here.

The no argument version is the easiest one to use but it only works on sibling elements. The links are not siblings but their parent li's are siblings. So you need to get the parent of the clicked link and then its index.

Keep in mind that the index is zero-based like an array. So if gallery has 12 items, the valid indices will be 0 through 11. The last valid index is galleryLength - 1

$("#imageGallery a").click(function(event){
    index = $(this).parent().index();
    // existing code omitted
});

I'll cover part of the prev button handler and the next handler will be similar logic.

When the user clicks the previous button you need to decrement the index. But there's a special case to consider when the current image is the first one (index 0). If you decrement that, you'll get -1 which is an invalid index.

Assuming a circular gallery:

$leftarrow.click(function(){
  if (index == 0) {
    // set it to the last item
    index = galleryLength - 1
  } else {
    index--;
  }
  // now we need to get the link at the new index
  $link = $('#imageGallery a').eq(index);

  // Use this link to retrieve the href of the link and the alt text of the image within it.
  // Use those to set the source of the image and the caption text of the lightbox
  // Similar to what is done in the click handler for the link
});

I used the .eq() method here. All of the links are selected and then the set is reduced down to the one at the supplied index.

Let me know if I've missed something since none of this is tested or if you have any questions about how the code works.

Post back with updated code if either of you are still stuck.

Answer 2 · 2016-09-19T00:33:17Z

September 19, 2016 12:33am

I'm sorry, but this is a little tough to read through. In the future you should take a look at the markdown cheetsheet link to better format you're questions. Putting your code into code blocks will help a lot.

What I think I am seeing is you trying to append html with variables that contain the html you want to add. The issue I think I'm seeing, however, is that you are using the the jQuery object $ and sticking those strings inside of it, instead of just having those variables contain the strings as is. By doing this, jQuery tries to target what is passed as a value to the method. So, all you really end up storing in those variables is probably a return of undefined or something.

I think what you need to do is take this:

var $buttonNext = $("<button> > </button>"); 

var $buttonPrevious = $("<button> < </button>");

and make it look like this:

var buttonNext = '<button> > </button>';

var buttonPrevious = '<button> < </button>';

Just an extra note here: I use single quotations when dealing with strings that contain html so that if i need to have double quotations with in the string, i won't run into problems. In this case, however, both single and double quotes will work.

That way, when you call those variables and pass them through the append method on a jQuery object, you are passing the html markup as a string, which is what the method is expecting.

Not everything needs to be a jQuery object. jQuery objects are meant to target nodes in the DOM structure, so if you aren't trying to get an element, or affect it, then you don't need to use it.

I hope that helps somewhat with what you are trying to do.

Answer 3 · 2016-09-19T07:48:55Z

September 19, 2016 7:48am

Thank you for taking the time to help me, sorry about the badly pasted code. I have been doing some code practice exercises to help me improve my use of jquery, this has been helpful. Thank you for the tips.

Welcome to the Treehouse Community

Looking to learn something new?

Tracy Excell

Tracy Excell

JQuery help in understanding steps needed to create a next button for a lightbox

Mary Hawley

Mary Hawley

Jason Anello

Jason Anello

3 Answers

Jason Anello

Jason Anello

Tracy Excell

Tracy Excell

Brian Hayes

Brian Hayes

Tracy Excell

Tracy Excell

Jason Anello

Jason Anello

Tracy Excell

Tracy Excell