- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- AJAX scripts
- Content Effects
- Misc scripts
- Chess widgets
- DHTML Suite
Download image slideshow script
You can download the entire script from this Zip file.
Thumbnails are inserted into the HTML code in the following format
<div><a id="firstThumbnailLink" href="#" onclick="showPreview('images/image1_big.jpg',this);return false;"><img src="images/image1.jpg"></a></div>
<div><a href="#" onclick="showPreview('images/image2_big.jpg',this);return false;"><img src="images/image2.jpg"></a></div>
<div><a href="#" onclick="showPreview('images/image3_big.jpg',this);return false;"><img src="images/image3.jpg"></a></div>
<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
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:
initGalleryScript(); // Initialize script
Speed of animations
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
- 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.