Creating a jQuery Slideshow – Clicking on Thumbnails

In this post series we’re creating a jQuery Slideshow from scratch. In the last post we started setting up the thumbnails for our slideshow. In this post we’re going to add functionality when the user clicks on a thumbnail.

Example: See jsFiddle at the bottom of this post. Note: The jsFiddle at the bottom of this post is a composite of all previous posts on this jQuery Slideshow.

What We’re Doing

Completing the thumbnail portion of a slideshow is time-consuming and involves quite a few steps. Right now, we’re on step #2 – adding functionality when the user clicks on a thumbnail.

When the user clicks, we’ll need to do two things: change the main image and change the description.

Additionally, the final coding will stop the slideshow once the user clicks on a thumbnail. If you want to keep the slideshow running, just comment out or remove the noted line.

The Function

The following is the complete function:

//Clicking Thumbnail functionality
 $('#imageHolder img').click(function(){
 var newImage = $(this).attr('src');
 $.each(images, function(index,value){
    if (value == newImage){
       descriptionChange(index);
       changeImage(index);
    }
 });
 // comment out line below to keep slideshow moving
 clearInterval(beginNow);
 });

Not too bad, right? We start with referencing our thumbnail images by using the Div ID “imageHolder”, space, and then “img”. Just like in CSS, to reference items inside of other items, you simple type their name after a space. To reference multiple separate items (like the #imageHolder and all images on the page), you’d add a comma in between (ie. $(‘#imageHolder, img) ). But we only want the images within the “imageHolder” Div.

Next we’ll grab the image source we just clicked on – $(this).attr(‘src’) – and put it in a variable – var newImage. $(this) refers to the item we just clicked. However, we put this line (line 3) down below line 4, it wouldn’t work since we’d have started a new function.

Just like our last post where we added the images to the “imageHolder” Div, we’ll cycle through the array of images (line 4) so we can find array index of the image we just clicked on. Confused? In our coding, we put all the images in an array at the top. We use the index of each image (for example – images[0] = ‘http://kimjoyfox.com/images/image.jpg’, where 0 is the array index), to switch the image in our functions. So to change the image using the functions we’ve already created (the best practice), we’ll need to figure out the image’s array index.

To figure out the image array’s index, we’ll need to cycle through the array, matching the value of each item in the array with the value of the image thumbnail we just clicked on (line 5). If they match (the image sources), then we’ll use that array index when we call the functions we’ve already created.

Line 6 and 7 we call the functions we already created, passing the index variable to each of them so they know which image/description to switch to.

Finally, line 11, we clear our interval that was automatically moving the slideshow forward. To keep the slideshow moving automatically, simply comment out or remove that line.

Fixing the Animation

While testing the slideshow out on jsFiddle, I came across an issue now that we’re adding more functions: If you change the image and then hover very quickly of the large image (to bring up the description) the description doesn’t finish changing.

This is an issue with the .stop() we added to the coding so that we wouldn’t get built-up animation queues.

Our original Coding was this:

//function for sliding Description in
$('#holder').hover(function(){
$('#description, #descriptionBack').stop().animate({
bottom: 0,
}, 400);
}, function(){
$('#description, #descriptionBack').stop().animate({
bottom: -40,
}, 400);
});

See the Stop() in lines 3 and 7? That stops ALL animation, which is a problem, since we’re changing the descriptions by fading in and out as well. So instead, we removed those and added in some additional coding on lines 5 and 9:

//function for sliding Description in
$('#holder').hover(function(){
$('#description, #descriptionBack').animate({
bottom: 0,
}, {duration: 400, queue:false});
}, function(){
$('#description, #descriptionBack').animate({
bottom: -40,
}, {duration: 400, queue:false});
});

By adding in queue: false, the animation doesn’t get added to the queue, accomplishing the same result while not stopping the other animation that we need.

The Result