Creating a jQuery Slideshow – Adding Thumbnail Navigation

November 7, 2012
Developers
LinkedInTwitterFacebookEmail
This post is part of a post series called jQuery Slideshow
  1. jQuery Slideshow - Options for Setup
  2. Creating a jQuery Slideshow From Scratch - Part 1
  3. Creating a jQuery Slideshow: Adding Arrow Navigation
  4. Creating a jQuery Slideshow - Styling with CSS
  5. Creating a jQuery Slideshow - Adding Descriptions
  6. Creating a jQuery Slideshow - CSS for Descriptions
  7. Creating a jQuery Slideshow - Setting up Thumbnails
  8. Creating a jQuery Slideshow - Clicking on Thumbnails
  9. Creating a jQuery Slideshow - Adding Thumbnail Navigation
  10. Creating a jQuery Slideshow - Adding Links to the Images

In this post series we’re creating a jQuery Slideshow from scratch. In the last post we adding functionality when the user clicks on a thumbnail. In this post we’re going to add basic thumbnail navigation.

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 Creating

In the last post we added thumbnails, but didn’t have any way to navigate through them. So we’re going to add navigational arrows to our slideshow in this post, and provide a way for the user to scroll through them. We will add another, quicker way in a future post, but for now, the user will simply hover of the arrow and the Thumbnails will move to the right or left.

The New HTML

We’ll have to add a few things to our HTML to make the arrows go where we want them to.

<div id="thumbnails">
 <div class="thumbnailArrows"><img src="https://whitefoxcreative.com/wfc-content/uploads/2012/09/682928_arrows_512x512-e1708371715273-100x100.png" id="Tleft"/>
 </div>
 <div id="window">
 <div id="imageHolder"></div>
 </div>
 <div class="thumbnailArrows"><img src="https://whitefoxcreative.com/wfc-content/uploads/2012/09/682928_arrows_512x512-1-100x100.png" id="Tright" />
 </div>
 </div>

We added a Div around our previous HTML called “thumbnails”. Then before and after the “window” Div that holds the thumbnails, add a Div class called “thumbnailArrows”. These will hold… you guessed it!… our thumbnail navigational arrows. The one before will have an image of a left arrow; the one after an image of a right arrow.

Notice both of these Divs have IDs: “Tleft” and “Tright”. We’ll reference those later.

Editing the CSS

The thumbnail CSS will now have a few additional Divs. Below is the entire CSS relating to the thumbnails:

#thumbnails { width:300px; height:50px; margin-top:20px;}
 #window { width:250px; height:50px; overflow:hidden; float:left; position:relative;}
 #imageHolder { height:50px; position:absolute; top:0px; left:0px;}
 #imageHolder img { width:35px; height:50px; float:left; margin-right:5px;}
 #thumbnails .thumbnailArrows { width:25px; height:50px; float:left; }
 #thumbnails .thumbnailArrows:hover {cursor:pointer; }

We added “thumbnails” Div, with a width of 300 pixels, a height of 50 pixels and we added a margin to add some nice spacing between the thumbnails and the main image.

We also changed the “window” Div’s width to 250 pixels. We edited the width here because we have to fit two arrows of 25 pixels each within the thumbnails section, which is made to be as wide as the main image. We also added float:left so that it will sit nicely with the arrows on either side.

Finally, we get to the actual arrows Div. Remember in CSS, writing a class or ID of a Div and then adding another one means the second is inside the first. For example, on the second to the last line, “.thumbnailArrows” must be inside of the “thumbnails” Div for the CSS to find it. If we added a comma in between, then we would be telling the CSS to change the width and height and float qualities of both the “thumbnails” Div and the “thumbnailArrows” Div.

The “thumbnailArrows” Div (which is used twice, once for each arrow – left and right) will have a width of 25 pixels, a height of 50 pixels and will float left, next to the “window” Div.

Finally, when the user hovers over one of the arrows, we want the cursor to change to a pointer, line 6. You can add a :hover to pretty much any Div.

The jQuery: Heavylifting Function

We’re really going to get into some heavy-lifting (or heavy-thinking) in this jQuery function. The entire function coding is below, and I’ll reference line numbers as I explain what’s happening.

function movingThumbs(speed, direction) {
 var currentLeft = $('#imageHolder').position().left;
 var moving = $('#imageHolder').width() - (Math.abs($('#imageHolder').position().left) + $('#window').width());
 if (currentLeft == 0 && direction == '+') {
       //do nothing
 } else if (Math.abs($('#imageHolder').position().left) + $('#window').width() >= $('#imageHolder').width() && direction == '-') {
       //do nothing
 } else if (direction == '+' && currentLeft != 0) {
       $('#imageHolder').animate({
            left: 0,
       }, speed);
 } else {
       $('#imageHolder').animate({
           left: '+='+direction + moving,
       }, speed);
 }
 }

Line 1 we name the function and set to accept two variables being passed. The first will be the speed of the animation and the second will be the direction the animation will go (ie, left or right depending on which arrow is being hovered over).

The main idea of the thumbnails is that they move left or right within the “window” Div. If they move left, the “imageHolder” Div’s left position will be negative (for example, -120px). If it moves right, the the “imageHolder” Div’s left position will be positive (for example, 120px). This will be important to keep in mind as we go along.

We’re going to have several options in this function: lines 5, 7, 9, and 13. The options are: 

Line 5: User is hovering over left arrow, but the thumbnails are already at the beginning of the thumbnails

Line 7: User is hovering over right arrow, but the thumbnails are already at the end of the thumbnails

Line 9: User hovers over left arrow and we want to scroll the thumbnails left

Line 13: User hovers over right arrow and we want to scroll the thumbnails right.

So let’s break each of these down:

Line 5: User is hovering over left arrow, but the thumbnails are already at the beginning of the thumbnails

The first thing we’ll need to know is whether we are at the beginning of the thumbnails, ie. far left, there are no other thumbnails to the left. To do that, we use Line 2 to check the current position of our “imageHolder” Div.

$('#imageHolder').position().left;

position() is a built-in jQuery function that finds the position of the Div (if set) from right, left, top, and bottom.We wanted to know where it is from the left, so we added “left” after the “position()” function. We also put this in a variable because we’ll use it more then once in our function.

Next, in line 5, we want to check if the position:left is 0 (thumbnails are already far left) and the user is hovering over the left arrow. If that’s true, nothing happens. That’s because we don’t want the thumbnails to continue scrolling if we’re already at the beginning of the line of thumbnails. The direction variable is coming from what we pass to the function (remember line 1). We’re using ‘+’ as a value for the left arrow and ‘-‘ as a value for the right arrow; don’t change this, as it will be used later.

Line 7: User is hovering over right arrow, but the thumbnails are already at the end of the thumbnails

Alternately, if we’re at the end of the thumbnails on the right, we’ll need to check so that the user can’t continue scrolling right. To do that, we’ll write line 7.

Easy part first: at the end of the else if statement, you’ll see

&& direction == '-'

That means we’re checking to see if the user is hovering over the right arrow (see Line 5 explanation).

Then comes the tricky part:

Math.abs($('#imageHolder').position().left) + $('#window').width() >= $('#imageHolder').width()

WHAT THE *!J@($!!!!

Take a deep breath. This is a lot like algebra. We’ll break it down. What we’re basically doing is taking the area left of our “window” Div, adding the width of the “window” Div and checking if that’s bigger or equal to the “imageHolder” Div’s Width – we seeing if we’ve reached the end of the line of thumbnails.

Or, if this makes more sense, we’re adding the “imageHolder” Div’s left (let’s say -40 pixels) plus the “window” Div’s width (ie. 300 pixels), which would equal 340 pixels (yes, we got rid of the negative sign) and seeing if that is greater then or equal to the entire width of all the thumbnails. Let’s say our “imageHolder” Div’s width is 360 pixels. That means there’s still 20 pixels of thumbnails still on the right side of the “window” Div that can be scrolled.

Math.abs($('#imageHolder').position().left)

Math.abs is a build-in Javascript function for making a number positive (ie. removing negative numbers). This is important because the “imageHolder” Div’s position left is always going to be either 0 or negative, and we’ll need to find the width of the “imageHolder” Div plus the “window” Div’s width to check if we’ve reached the end.

Line 9: User hovers over left arrow and we want to scroll the thumbnails left

Only two more options to go! This one is again very simple. We’ll check to see if the left arrow is being hovered over and if the “imageHolder” Div is not to the far left.

else if (direction == '+' && currentLeft != 0) {
 $('#imageHolder').animate({
 left: 0,
 }, speed);
 }

If both these are true (notice the && between the two options) then we tell the “imageHolder” Div to animate till it has a left value of 0, meaning we’re at the beginning thumbnail. After we close the first brackets of the animate function, the curly brackets, we add a comma and the variable speed that we send to this function.

Line 13: User hovers over right arrow and we want to scroll the thumbnails right.

Finally, our last option is really the most basic one: the user is hovering over the right arrow to scroll through the thumbnails.

else {
$('#imageHolder').animate({
left: '+='+direction + moving,
}, speed);
}

This one, we don’t put a else if statement on because if none of the other options are true, this one must be. We use the built-in animate function again, using the speed variable again at the end, but in the middle we do something a little different.

We will be changing the left position of the Div, but we don’t an absolute position here (though we could have). In the Line 9 option, we moved the left position to an absolute position of 0. Here, we’ll move the left position, say, 300 pixels from wherever it starts. To do this, we use the ‘+=’. Then we’ll use the direction variable (a ‘-‘ for the right arrow), and the moving variable.

So basically, the line really translates to this:

left: +=-300,

Let’s take a look at the moving variable set at the beginning of this function:

var moving = $('#imageHolder').width() - (Math.abs($('#imageHolder').position().left) + $('#window').width());

This variable needs to figure out how many more pixels till we reach the end of the thumbnails. So we take the entire “imageHolder” Div’s width (which holds the thumbnails and is set to their width), and subtract the sum for the area already scrolled through (position:left), and the “window” Div’s width. Just like in algebra, we enclose the second half (after the ‘-‘) in parenthesis so that those are added first, and then the final number is subtracted from the total width.

All that math gets us how far from the end of the thumbnails we are, so we can move the “imageHolder” Div the appropriate amount.

jQuery Calling the Function

Promise, we’re almost done! Now we have to call the function and pass the variables it needs to operate.

    $('.thumbnailArrows').hover(function() {
var whiches = $(this).children('img').attr('id');
if (whiches == 'Tleft') {
movingThumbs(2000, '+');
}
else {
movingThumbs(2000, '-');
}
}, function() {
$('#imageHolder').stop();
});

Line 1 – when the user hovers over one of the arrows (or technically, the Div class “thumbnailArrows” that the arrow picture is inside of)

Line 2 – Get the children image’s ID (So the image inside of the hovered over Div – it’s ID)

Lines 3 and 6- If the ID is Tleft (the left arrow), or the right arrow (no need for the if statement)

Lines 4 and 7 – call the function we just created; set the speed variable to 2000 (2 seconds) and the direction variable appropriately.

Lines 9 -10 – When the user stops hovering over the “thumbnailArrows” Div, stop the animation.

The Example:

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Comments