Slide Thumbs

Step 1: Create the Mark-up

First we add container elements for output. The outer-most container is used to decorate the output with a background image and padding. The next container is the element that will be used to view the images through. The images and their captions are placed inside the inner-most container and wrapped with div elements.

The images are all a uniform size, and the preview_inner container will be sized to accommodate them. The image size will be used in the script that we’ll add later.


Within the thumbnails container element, we add list of thumbnails linking to the image slides and an arrow indicating current position.

Leonardo Maia
Fred Maya

Step 2: CSS

The CSS is pretty simple but it sets up everything that is happening. Since overflow is hidden on the preview_outer container what part of the image slide were showing is just a matter of setting a scrollLeft value.

#preview_wrap {
margin: 0 auto;
padding: 22px;
width: 550px;
height: 400px;
background: url('bg_preview.gif') top left no-repeat;

#preview_outer {
overflow: hidden;
width: 550px;
height: 400px;
position: relative;

#preview_inner {
text-align: left;
height: 100%;
position: relative;

#preview_inner div {
float: left;
width: 550px;
height: 400px;
position: relative;

#preview_inner div a {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
text-indent: 20px;
padding: 20px 0;
color: #fff;
background: url(bg_trans.png);
text-decoration: none;
font-size: 18px;

#thumbs {
padding-top: 30px;
position: relative;
width: 750px;
text-align: center;

#thumbs span {
padding: 12px;
width: 80px;
height: 80px;
cursor: pointer;
background: url('bg_thumb.gif') top left no-repeat;
display: inline-block;

#arrow {
position: absolute;
top: -13px;
background: url('bg_arrow.gif') top center no-repeat;
width: 104px;
height: 39px;
display: none;

Step 3: jQuery

Now, let’s add the JavaScript. The code is commented to explain what we’re doing.’

$(document).ready(function() {
// Save  the jQuery objects for later use.
var outer = $("#preview_outer");
var arrow = $("#arrow");
var thumbs = $("#thumbs span");

var preview_pos;
var preview_els = $("#preview_inner div");
var image_width = preview_els.eq(0).width(); // Get width of imaages

// Hook up the click event {
// Get position of current image
preview_pos = preview_els.eq( thumbs.index( this) ).position();

// Animate them!
outer.stop().animate( {'scrollLeft' : preview_pos.left}, 500 );
arrow.stop().animate( {'left' : $(this).position().left }, 500 );

// Reset positions on load
arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
outer.animate( {'scrollLeft' : 0}, 0 );

// Set initial width
$("#preview_inner").css('width', preview_els.length * image_width);


Be Sociable, Share!

Leave a comment