Photo Slider Tutorial

Requirements

jquery
photoslider.js
photoslider.css
Very basic knowledge of html & javascript

If you would prefer to have everything in one package, you can download the photoslider.tar.gz

Instructions

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 tutorial I'm using a thumbnail size of 50x50 and a full view of 600x400. You can have any size for the "full view" but the thumbnails must all be the same size. We'll start with 4 thumbnails.

It's worth noting that you can easily use the photo slider to query a server script to load the images. If you want to see an example of this you can view my wife's wedding portfolio. If you examine the slideshow.js you'll see it fires off a call to a PHP script "fetch.php" using image ids.

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 <head> tag

<link rel="stylesheet" type="text/css" media="screen" href="photoslider.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="photoslider.js"></script>

in the <body> tag


<div class="photoslider" id="default"></div>

<script type="text/javascript">
$(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'}
		}
	};

	//or set our images by the bucket importer
	var ids = new Array(0,1,2,3);
	FOTO.Slider.importBucketFromIds('default',ids);
});
</script>

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');

Optional - Preload Images

If you want the images to start pre-loading before a user clicks on them, run the preloadImages method.


FOTO.Slider.preloadImages('default');

Finished Look

Now everything is complete, so just load up your page.

Full JavaScript Code Used in Example

<script type="text/javascript">

	$(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');
	});
</script>

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).

About the Author - Jesse Janzer

I created this site for my wife who is a professional wedding photographer in Utah. I've had enough people contact me asking how I achieved the slideshow effect; so I decided to clean up the code, remove some non-important methods, and create a tutorial. If you would like to see more examples of the original slideshow I created or you are interested in taking a peek at her pictures you can browse the portfolio.

For any comments, suggestions, or questions you can send me an email at jjanzer_photoslider@lanthera.net.

ChangeLog

1.1 Added caption support
1.0 Initial Release