Download image slideshow script


Bookmark and Share


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.


Add thumbnails

Thumbnails are inserted into the HTML code in the following format

<div class="strip_of_thumbnails">
  <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:

<script type="text/javascript">
initGalleryScript(); // Initialize script

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.


Seth Terpstra
Is there any way to get this slideshow script to autoplay?
Seth Terpstra at 03:01PM, 2011/03/21.
Admin comment
Seth,No, this script doesn't support Autoplay yet. The only scripts which supports that is the new Image Gallery 2011 script.
DHTMLGoodies at 03:30PM, 2011/03/21.
Seth Terpstra
Thanks for the quick reply. I'm in a rut trying to find a slideshow that has css customizable vertical thumbs on one side that autoplays. Even the jQuery cycle scripts that autoplay don't support the kind of thumbs I'm looking for.
Seth Terpstra at 03:44PM, 2011/03/21.
Greeeeg Westneat
Is there a way to link to a high resolution file by clicking on the big photos?
Greeeeg Westneat at 02:48AM, 2011/03/26.
Thank you, Seth, for this great slide-show script. It's just what I have been looking for, simple and easily customizable.One thing I have been trying to do with it and I am not sure it's even possible - I'd like to link from the big pictures to pages with descriptions. I've tried to use image maps - but I've had no luck.Is it possible, and if so... how would I go about doing it?Thanks in advance for any help you might offer. :)
Jennifer at 05:26PM, 2011/03/30.
Thank you, I'll give it a shot. Again, I appreciate your work and effort to help. :)
Jennifer at 07:21AM, 2011/04/04.
Rafael Portugal
Hi!Very nice this script, i would like to ask one question.I have to put captions in all of my big images, but i don´t know how.This script is perfect for my project, but this feature is missing.If you could help me, i will parecciate.Thanks!
Rafael Portugal at 12:40PM, 2011/04/14.
Hello, just one quick question. Can this script support multiple galleries on one page? Or how would i change the code to support 3 galleries on 1 page.Great script btw...
john at 08:01PM, 2011/04/20.
ms at 11:20AM, 2011/05/01.
Great Script. The speed of the scroll is fine in firefox but slow in IE. Is there a way I can get it to scroll the same in all three browsers? (IE, Firefox and Safari)?
Sherry at 08:38PM, 2011/05/06.
Admin comment
Sherry, I will take a closer look at this script soon.For the moment, you can try to modify some variables at the top of image-slideshow-5.jsNear the top, you have these two lines:var slideSpeed = 5; // Speed of thumbnail slide - Lower = fastervar slideSteps = 8; // Also speed of thumbnail slide - Higher = faster Below them, add:if(navigator.userAgent.indexOf('MSIE') >=0){ slideSteps = 10; slideSpeed = 4;}i.e. specifying a higher value for slideSteps and a lower value for slideSpeed when the browser is Internet Explorer. When I get time, I will update the script so that it works the same across browsers.
DHTMLGoodies at 04:28PM, 2011/05/13.
Thanks, this helps!
Sherry at 07:55PM, 2011/05/13.
Corporate Logo Design
awesome script i appreciate it
Corporate Logo Design at 07:42AM, 2011/06/04.
Hey! Love this, but I'm running into a problem where the first thumbnail doesn't work; the first image doesn't come up automatically, and if I click the first thumbnail first, nothing happens. If I click a different thumbnail, bringing up another image, then click back to the first thumbnail, it works fine. I've set up multiple galleries, and this is happening in each one. Any idea what I may have done wrong?
Alena at 03:23AM, 2011/06/23.
Rodrigo Sobral
I simply LOVE your script!My question is: is there a way to add more columns? Make it 5 pictures wide and 5 pictures high?what do I have to do? just modify the .js file?i would love to hear from you! thanks in advance!
Rodrigo Sobral at 11:17AM, 2011/09/17.
i want auto scroll with pause option
srinivas at 08:51AM, 2011/10/22.
hi my brother nice codes i want to put it on my website. but the no images appear on it please help me on how to put images on it and get it moving........... great work...
muhammed at 04:43PM, 2012/01/17.
can you give me the script of image slideshow like on or like that .... please contact me to the mail of post a comment here ill be in touch and thanks for listening raj
raj at 08:50PM, 2012/03/02.
hi, I really appreciate your effort and awesome job. But could you please make this autoplay?I really need it, but don't know what to do.and one more thing, I wanted to rollover images for thumbnails, so I made it background images. but the active border doesn't work. Is there any way those rollover images to be used active images?I'm so sorry for the so much questions.but I'm looking forward to your help.Thanks in advance.
sun at 06:46PM, 2012/03/06.
Sajjad Hussain
Plz Quick Reply,How will slides images in HTML for many Images or Folder?
Sajjad Hussain at 01:07PM, 2012/03/20.
morning every one, may i ask some question, do you have a gallery which we don't need the thumbnails, it seems like simple gallery, and easily to embed to the existence page?
Rahmad at 12:49PM, 2012/12/11.
morning every one, may i ask some question, do you have a gallery which we don't need the thumbnails, it seems like simple gallery, and easily to embed to the existence page?
Rahmad at 12:49PM, 2012/12/11.
It isn't working. I try to fix but not... :(
jeany at 03:43AM, 2012/12/26.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024