Download image slideshow script

Demo

Bookmark and Share

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">
  <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>

<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:

<script type="text/javascript">
initGalleryScript(); // Initialize script
</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.

Comments

Seth Terpstra
Is there any way to get this slideshow script to autoplay?
Seth Terpstra at 09:01AM, 2011/03/21.
Admin comment
DHTMLGoodies
Seth,

No, this script doesn't support Autoplay yet. The only scripts which supports that is the new Image Gallery 2011 script.
DHTMLGoodies at 09:30AM, 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 09:44AM, 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 08:48PM, 2011/03/25.
Jennifer
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 11:26AM, 2011/03/30.
Admin comment
DHTMLGoodies
Jennifer,

The script doesn't support this at the moment, but a quick workaround should work:

1) Add an <a> tag as parent to your large image in the html, i.e.

<a href="/descriptionOfPicture1.html"><img src="images/image1_big.jpg"></a>

2) Inside image-slideshow-5.js, change the showPreview function to the code below:

function showPreview(imagePath,inputObj, href)
{
if(DHTMLgoodies_currentActiveImage){
if(DHTMLgoodies_currentActiveImage==inputObj.getElementsByTagName('IMG')[0])return;
DHTMLgoodies_currentActiveImage.className='';
}
DHTMLgoodies_currentActiveImage = inputObj.getElementsByTagName('IMG')[0];
DHTMLgoodies_currentActiveImage.className='activeImage';

DHTMLgoodies_largeImage.parentNode.href = href;
DHTMLgoodies_imageToShow = imagePath;
var tmpImage = new Image();
tmpImage.src = imagePath;
currentUnqiueOpacityId = Math.random();
moveOpacity(opacitySteps*-1,currentUnqiueOpacityId);
}

3) In your html code, when you specify thumbnails, use this syntax:

<div><a href="#" onclick="showPreview('images/image2_big.jpg',this, '/index.html');return false;"><img src="images/image2.jpg"></a></div>

The only difference here is the third argument to showPreview which should contain the path to your description page(in this example, it's set to /index.html)






DHTMLGoodies at 05:04AM, 2011/03/31.
Jennifer
Thank you, I'll give it a shot. Again, I appreciate your work and effort to help. :)
Jennifer at 01: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 06:40AM, 2011/04/14.
john
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 02:01PM, 2011/04/20.
ms
thx
ms at 05:20AM, 2011/05/01.
Sherry
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)?
Thanks!
Sherry at 02:38PM, 2011/05/06.
Admin comment
DHTMLGoodies
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.js

Near the top, you have these two lines:

var slideSpeed = 5; // Speed of thumbnail slide - Lower = faster
var 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 10:28AM, 2011/05/13.
Sherry
Thanks, this helps!
Sherry at 01:55PM, 2011/05/13.
Corporate Logo Design
awesome script i appreciate it
Corporate Logo Design at 01:42AM, 2011/06/04.
Alena
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 09:23PM, 2011/06/22.
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!

rodrigosobral@live.com
Rodrigo Sobral at 05:17AM, 2011/09/17.
srinivas
i want auto scroll with pause option
srinivas at 02:51AM, 2011/10/22.
muhammed
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 09:43AM, 2012/01/17.
raj
can you give me the script of image slideshow like on www.damnlol.com or www.lolhappens.com like that .... please contact me to the mail of post a comment here ill be in touch and thanks for listening

raj
raj at 01:50PM, 2012/03/02.
sun
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 11:46AM, 2012/03/06.
Sajjad Hussain
Plz Quick Reply,



How will slides images in HTML for many Images or Folder?
Sajjad Hussain at 07:07AM, 2012/03/20.
Rahmad
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 05:49AM, 2012/12/11.
Rahmad
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 05:49AM, 2012/12/11.
jeany
It isn't working. I try to fix but not... :(
jeany at 08:43PM, 2012/12/25.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com