Photo Slider Tutorial
See an Example.
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.
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
in the <body> tag
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 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.
Now everything is complete, so just load up your page.
I've recently launched my startup qktract.com. If you're sick of never getting your contracts mailed or faxed back to you qktract.com is perfect for you. Ask your clients questions, have them sign a contract, and receive payments all online.
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 email@example.com.
- 1.2 - 06/09/10 Updated for the latest version of jQuery
- 1.1 Added caption support
- 1.0 - 08/08/07 Initial release