Photo Slider with jQuery

Step 1 – Pick Your Photos

First we need to start off with some images. You’ll want these images to be thumbnails that also have a larger view available. In this example I’m using a thumbnail size of 50×50 and a full view of 600×400. You can have any size for the “full view” but the thumbnails must all be the same size. We’ll start with 4 thumbnails.

 

Step 2 – Import Your Images

Now we need to tell our photo slider which images we want to use. Here we can either set them directly using the bucket hash or we can give it an array of image ids.

in the tag

in the tag

$(document).ready(function(){
//change the 'baseURL' to reflect the host and or path to your images
FOTO.Slider.baseURL = 'http://example.com/path/';

//set images by filling our bucket directly
FOTO.Slider.bucket = {
'default': {
0: {'thumb': 't_0.jpg', 'main': '0.jpg', 'caption': 'Opie'},
1: {'thumb': 't_1.jpg', 'main': '1.jpg'},
2: {'thumb': 't_2.jpg', 'main': '2.jpg', 'caption': 'Trash the Dress'},
3: {'thumb': 't_3.jpg', 'main': '3.jpg'}
}
};
});

If your image urls can fit into a pattern you can use the importBucketFromIds which uses the thumbURL and mainURL string to determine how to generate the url. If you’re generating the ids it makes importing much easier. If you want captions on your images set the caption in the bucket.

Step 3 – Load the Photo Slider

FOTO.Slider.reload('default');

Optional – Slideshow

If you want to you can add slideshow controls, along with automatically playing on load.

//enable the slideshow and build the controls
FOTO.Slider.enableSlideshow('default');

//automatically play
FOTO.Slider.play('default');

Full JavaScript Code Used in Example


$(document).ready(function(){
var ids = new Array(0,1,2,3);
FOTO.Slider.importBucketFromIds('default',ids);
FOTO.Slider.reload('default');
FOTO.Slider.preloadImages('default');
FOTO.Slider.enableSlideshow('default');
});

Notes

If you change the thumbnail width, you will need to modify the this.data[key][‘thumbWidth’] in the reload function and set the number to the total width (width + border-left + border-right + margin-left + margin-right + padding-left + padding-right).

Download: http://www.htmldrive.net/items/download/325

Be Sociable, Share!

Leave a comment