Photo Slider Tutorial

See an Example.

StumbleUpon Toolbar


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


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">
	//change the 'baseURL' to reflect the host and or path to your images
	FOTO.Slider.baseURL = '';

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

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


Optional - Slideshow

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

//enable the slideshow and build the controls

//automatically play'default');

Optional - Preload Images

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


Finished Look

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

Full JavaScript Code Used in Example

<script type="text/javascript">

		var ids = new Array(0,1,2,3);


If you change the thumbnail width, you will need to modify the[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


  • 1.1 Added caption support
  • 1.0 Initial Release

Utah Wedding Photographer

OpieFoto features unique Utah wedding photography and Utah portrait photography by Chauntelle Janzer. We shoot wedding photography all over Utah including Salt Lake City, Provo, Orem, Spanish Fork, Payson, Ogden, Layton, Logan, Park City, Saint George, and Moab. We use candid, artistic, photo journalistic, and traditional styles to create a unique mix of photography for your wedding day. We offer several customizable wedding photography packages to cover your wedding day. Several of these packages offer wedding albums. There are multiple options for choosing your album including styles such as magazine, storybook, and coffee table.

Please take the time to check out our wedding, engagement, and bridal portfolios. To see some of our recent photo shoots you can view our blog. Schedule a appointment so we can put together a custom wedding package and choose your wedding album.