Download image slideshow script

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download script

You can download the entire script from this Zip file.

Setup

Add thumbnails

Thumbnails are inserted into the HTML code in the following format

<div class="strip_of_thumbnails"> is the parent element of a vertical "strip" of thumbnails. How many thumbnails you add inside this div depends on your layout. In the demo, I have used 3 images.

Also note that id="firstThumbnailLink" is only applied to the first thumbnail. It is used to initially highlight this thumbnail

Layout

Width, height, border colors etc. are controlled by CSS. Look at the comment in image-slideshow-5.css for help.

Initialize the script

The slideshow script is initialized with these lines at the bottom of the HTML file:

Speed of animations

You can control the speed of how fast the opacity changes on the large images, and how fast you want the thumbnail pane to slide when you click on the arrows. This is done by adjusting the javascript variables opacitySpeed, opacitySteps, slideSpeed and slideSteps at the top of image-slideshow-5.js.

Number of thumbnail columns

Usually, the script is able to measure how many columns of thumbnails you have automatically. However, if you have a slideshow where the script isn' table to show all your columns, you can set number of columns manually at the top of image-slideshow.js. This is done in the variable var columnsOfThumbnails

Update log

October, 26th, 2006 - Fixed problem with the script in Safari browser for Mac. To implement the changes, replace the js file and add position:absolute; to .strip_of_thumbnails in the css.