Creating a jQuery Slideshow – Setting up Thumbnails

October 24, 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 added CSS and a bit of jQuery to make the descriptions look good. In this post we’re going to start setting up thumbnails for our slideshow.

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

What We’re Doing

You’ve all seen slideshows online with the image thumbnails below them. Technically, they’re galleries, but we’re going to add the thumbnails to our slideshow anyways… mainly cause it’s cool and awesome and stuff.

Ultimately, we’re going to load the images dynamically as the user scrolls the thumbnails to the right, but we’ll initially set it up with all the images loading when the page loads.

Also, in this slideshow we’ll be using a smooth scroll, not “group” scroll. So basically, instead of the user clicking a small arrow next to the thumbnails and being taken to the next group of photos, when they hover over that arrow, the thumbnails will scroll (semi-)slowly to the right. We’re doing it this way because I think this scrolling seems more polished.

The thumbnails won’t DO anything at the end of this post. We’re just creating the layout.

The Layout

Thumbnails can be placed above or below a slideshow, obviously, but I’ll be adding them below the slideshow. You can easily move the HTML above if you’d like.

We’re using a window setup – all the images will be loaded in the Image Holder Div which is inside of our Window Div:

jQuery Slideshow Window Images

The window Div will have a overflow:hidden property, so it only shows as wide as we want it to.

The biggest challenge with this type of setup is keeping track of where the Image Holder is within the Window Div. But because we’ll be using the smooth scrolling, it will be a bit easier (then if we used the “group” scrolling).

The HTML

The HTML is simple:

<div id="window">
    <div id="imageHolder"></div>
</div>

Just add that to the end of our slideshow coding from before. See the jsFiddle at the bottom for the complete coding.

Like we said in the Layout section above, we’re adding the “imageHolder” Div inside of the “window” Div.

The CSS

To our CSS file, add the following:

#window { width:300px; height:50px; overflow:hidden;}
#imageHolder { height:50px; }
#imageHolder img { width:35px; height:50px; float:left; margin-right:5px;}

The first two deal with the Divs we added before. We set the width and height of the “window” Div and make the overflow:hidden, and then set the height of the “imageHolder” Div. We don’t set the width of the “imageHolder” Div because we want to set it using jQuery. We could conceivably set it to an enormous number, like 99999px, but I’d rather set it to the actual width of the images.

The last line tells our images within the “imageHolder” Div what to do. We set the width and the height of them, give them a margin-right setting of 5px (so they aren’t all crammed together), and finally float:left. The float left allows them to sit on the same line. Otherwise, they automatically would stack downwards instead of sideways – which wouldn’t work very well.

The jQuery

And finally, to round it out, we’ll add just a touch of jQuery

//setting the width of the imageHolder
 $('#imageHolder').css('width', images.length*40);
//adding images to the thumbnails
$.each(images, function(index, value) {
        $('#imageHolder').append('<img src="'+value+'" />');
 });

Remember how I said we’d need to set the “imageHolder” Div’s width? That’s what we do on line 2. I combined it all together, the math and the setting of the css property width. images.length gets the number of images in our array, and we multiple it times 40 because the image width is 35, and the margin-right width is 5. Now this isn’t going to matter until we start getting beyond the width of the window Div, so I doubled the images in our slideshow in the jsFiddle at the bottom.

Note: images is an array set with all our image sources within it (see jsFiddle at the bottom).

On line 5, above, we cycle through each item in the “images” array, and (line 6) we add the thumbnail image into the “imageHolder” Div. The “value” variable (using in line 6) is the value of each item in the array. By adding the images using jQuery, we’re not doubling up on the coding for the images array: we say it once and manipulate as needed.

Complete Coding

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>