New on DHTMLGoodies.com:

DHTML Chess is now available for WordPress at WordPressChess.com.

Download image slideshow

Demo

Download script

You can download the entire script from this Zip file.

Setup

Add thumbnails

In the <body> section, add images to the slideshow in the
<div class="theImages"><DIV> section

This is done with the following HTML code:
<a href="#" title="images/image1_big.jpg"><img src="images/image1.jpg"></a>

image1.jpg is the small image, while image1_big.jpg inside the title attribute of the <a> tag is the path to the large image.

Add image captions

Image captions are added in <DIV> tags below your thumbnails. Example:

<div class="imageCaption">This is the caption of image number 1</div>

Initial large image

When someone opens the page, you can have a default image showing in the preview pane. This is done by adding a <img> into the "previewPane" div. Example:

<div class="previewPane">
<img src="images/image1_big.jpg">
</div>

Change size of gallery

If you're not satisfied with the initial appearance(width, height, border colors etc.) of the gallery, you can make adjustments to the CSS(The <style type="text/css"> part). Look at the comments in the CSS for further information

Javascript variables

There are two Javascript variables available. The first one indicates the size of your image arrows(up and down). You have to change this variable in case you're using other images with a different size.

arrowImageHeight : 35; // Height of arrow image in pixels;

Set this variable equal to the height of your arrow images(pixels)

The next variable indicates if you want to show a "Please wait" message while the images is being loaded.

displayWaitMessage : true;

You can modify the text in this wait message by changing the following HTML code:

<span class="waitMessage">Loading image. Please wait</span>

Comments

I want to put two slide shows next to each other, but when I copy and paste the coding, the arrows don't work (they don't move the thumbnails up or down)... can you tell me what I have to do to make this work?

Thank you!

Jay at 05:13PM, 2011/02/17.

Admin comment

HiIt only works with one slideshow per page at the moment. I will try to find time to modify the script to support more slideshows per page.

DHTMLGoodies at 05:28PM, 2011/02/17.

Hmmm.. I wanted to put up to three on the homepage, do you think you can give an estimated timeframe? Thanks again.

Jay at 05:46PM, 2011/02/17.

Admin comment

New version is now available. It has been rewritten with Mootools.

DHTMLGoodies at 07:05PM, 2011/02/17.

Can we change main (big)image after x seconds ?

Waseem at 04:55PM, 2011/03/01.

Admin comment

Waseem,No, you can't do that with this script. Maybe the new one(Image Gallery 2011) is what you're looking for !?

DHTMLGoodies at 05:08PM, 2011/03/01.

Hi !I got a new trouble whit IE8 dosent work java scriptAny help would be grat master!Internet explore never work good, any version.Wha i need to play js for slide-show on IE6, 7 or 8?

Mark Moran at 05:51PM, 2011/03/07.

i want t display movie poster and its corresponding rating(which is an image of stars ) image at its sidealso image name is stored in sql databasecan you show me the code to implement this..??also if a movie has no rating its image should not be displayed and even the movie poster can be emptyim using asp.net and c#plz help bro

akshaynaik at 02:37PM, 2011/04/06.

I think your slideshow is totally awesome. It works perfectly. Is there any way though, to get rid of the rollover on the thumbnails: "images/image4_big.jpg"? I tried onClick= instead of title= but that doesn't work.Thanks in advance!

Connie at 06:13PM, 2011/05/07.

Admin comment

Connie,Today, I have modified this script a little bit to make it easier to accomplish what you're trying to do.The changes are available in the zip file. If you want to make the changes manually, this is what you have to do:Inside image-slideshow-vertical.js, change the revealThumbnail and hideThumbnail functions to this: revealThumbnail : function(e) { e.target.addClass('imgOver'); }, hideThumbnail : function(e) { e.target.removeClass('imgOver'); } i.e. instead of modifying the css attributes, I'm implementing use of a css class.Inside image-slideshow-vertical.css, add this: .theImages .imgOver { filter:alpha(opacity=100); /* Transparency - IE */ opacity:1; /* Transparency - Firefox */ } Now, you can modify this mouse over effect by making changes to this part inside image-slideshow-vertical.css: .theImages img{ border:0px; /* No border */ filter:alpha(opacity=50); /* Transparency - IE */ opacity:0.5; /* Transparency - Firefox */ padding-top:1px; /* Space between images */ } .theImages .imgOver { filter:alpha(opacity=100); /* Transparency - IE */ opacity:1; /* Transparency - Firefox */ } .theImages img are general rules for all thumbnails, while .theImages .imgOver is used for the mouseover effect.The best choice for you may be something like this: .theImages img{ border:0px; /* No border */ filter:alpha(opacity=100); /* Transparency - IE */ opacity:1; /* Transparency - Firefox */ padding-top:1px; /* Space between images */ } .theImages .imgOver { filter:alpha(opacity=100); /* Transparency - IE */ opacity:1; /* Transparency - Firefox */ }

DHTMLGoodies at 11:52AM, 2011/05/09.

This is perfect!But is there any way I could move the thumbnail bar to the top or the sides?Thanks :)

Andreas at 09:20PM, 2011/05/16.

wrong page.. stupid multitasking :/

Andreas at 09:38PM, 2011/05/16.

Hi,the image caption dont change on ie, if you click image6, you've got caption for image6, but then image5,1,2... have "caption for image 6"any idea ?tksazy

azylum at 08:43AM, 2011/05/18.

Admin comment

Fluster,You are not using the script on this page, but the one athttp://www.dhtmlgoodies.com/index.html?whichScript=image_slideshowUnfortunately, the slideshow you are using does not support more than one slideshow per page. I'm planning on implementing support for that, but haven't had time to do it yet.

DHTMLGoodies at 06:53AM, 2011/05/20.

hello, Excellent slideshow - just what I need for my project, however, I'm having the same problem as AZYLUM - "the image caption dont change on ie, if you click image6, you've got caption for image6, but then image5,1,2... have "caption for image 6"any idea ?"Thanks!-A

Andreius at 08:51PM, 2011/05/25.

Admin comment

Andreius,I have created a fix for this problem.You can either download the new zip file and replace your image-slideshow-vertical.js with the one you find there, or you can manually add this line:this.previewImage.removeEvents();above:this.previewImage.addEvent('load', this.hideWaitMessageAndShowCaption.bind(this, [imageIndex]));(Around line 100)

DHTMLGoodies at 08:58AM, 2011/05/26.

Hello,

New problem - first image description shows up after last thumbnail and makes vertical film stip infinite even though .theImages div height is set at 2410px (/* Higher than total height of thumbnails */ 24x100x100 thumbs = 2410px)

/* Higher than total height of thumbnails */

http://www.preferredgardens.com/portfolio-beforeafter-dev.html

I've tried various things, nothing works and it shows in all browsers.

Thanks,
-Andreius

Andreius at 01:43PM, 2011/05/27.

Admin comment

Andreius,Inside your css file, you should have.theImages .imageCaption { display: none;}and not.theImages .imageCaption { display: block;}

DHTMLGoodies at 05:22PM, 2011/05/27.

That did it, so another feather into your hat, Sir! :)

Andreius at 06:00PM, 2011/05/27.

great work. how can i increase the number of images to 24

magnus ojeonu at 04:02PM, 2011/06/21.

Hi,Can the Slideshow run automatically on load instead of having to load images from the thumbnail by clicking. That would help immenselyThanks,Arny

Arny at 01:38PM, 2011/06/22.

Hello - is is possible to make this slide show autoplay? or to make Image Gallery 2011 (horizontal) with the thumbnails vertical?thanks so much!

jenny at 09:44PM, 2011/06/24.

Hey,
I'm still a little confused about how to remove the image title when hovering over the thumbnails.
I have the latest script from the zip file, so the codes mentioned above are already in place and the titles are still showing...any ideas?
Thanks.

Nicola at 06:01PM, 2011/07/11.

I have got still the same problem. I have downloaded the new .zip, but the titles are still appearing there.

Miro at 11:35AM, 2011/07/25.

but anyway, it is great work! Thank you for that.

Miro at 11:37AM, 2011/07/25.

I keep having problems with putting this into dreamweaver. I attached the .js and .css to the document and it all looks the way I want but when I click the thumbnails nothing happens. http://mooneyarch.com/prototypes.php (the aspen menu bar)

Lola at 01:27AM, 2011/08/24.

When we open the demo in Opera (having the newest version, 11.5)some strange things happen:

http://www.dhtmlgoodies.com/scripts/image-slideshow-vertical/image-slideshow-vertical.html

When the mouse moves over the filmstrip the thumbnails below the pointer disappear.

It seems to me everything is working well in all other browsers I have tried.

Thank you,

Arnelg at 10:21PM, 2011/09/03.

Hi,Loving this slideshow but need it to be accessible.Having a small prob when keyboard tabbing through the slideshow, in Firefox the arrows disappear. Anybody else encountered this?

envirogov at 06:08AM, 2011/09/15.

Thanks a lot for creating such a great script! I have a question though, is it possible to give the thummbnail of the previewed image a different layout? For example turn it's opacity to 1 or sth like that.Thanks in advance

mats at 04:31PM, 2011/09/25.

Love your gallery.It would be great if you would be able to find time to make it possible to place few galleries in the same page. It works really great as a menu with photos!

Vlad at 06:20PM, 2011/09/27.

I love the look and feel of this gallery.
My problem is that I need a gallery that has a menu of list item descriptions down the left side. Then, when you click on or mouse-over the left side item, it displays the associated photo on the right. I can't find anything that seems to do this in php.
Thanks for any suggestions you may have.

Darrel at 05:52PM, 2011/09/28.

Thanks for this script! Is it possible to make it horizontal or vertical option? I have been looking for a script that works more than one on the same page.

Matt Friend at 03:54AM, 2011/10/12.

Everything works the way I've wanted, except In Chrome the Image Caption doesn't display at all and I can't figure out what to change to make it work in it. I even tried replacing the mootools file with verision 1.4.2 but that didn't work either.

mike at 12:34AM, 2011/12/06.

Ok I figured out how to get the image caption to display, for testing purposes i was using the same image over and over, but as long as its not the same image url in sequence twice then it works and displays the image caption of them.The only other thing that i can notice is that in Opera the thumbnail images disappear when you hover them. Do you know of any way to keep them for disappearing? It only does this in Opera.

mike at 02:34AM, 2011/12/06.

Just a question, how about if i have 400 pics in a folder can it see this folder directly or do i need to program each image name.Sorry for beeing a noobMike

Mike at 08:52PM, 2012/01/29.

nice one gallery works really smooth .i wanted to make an small modification in it .can i change the vertical thumbnail images with an text instead of image so that if i click on that text the big image appears .

guddu at 07:49AM, 2012/02/25.

Love the script, and looks great!One feature I'd love to see is to have the full-size images and captions fade-in on load. I've tried doing stuff with jquery and jscript but nothing seems to work.... There has to be an easy way to make this happen.Look forward to hearing back from you, meanwhile thanks for a great script!

Paul at 07:17PM, 2012/03/16.

How can i fix the size of big image?

Ashish at 02:05PM, 2012/06/07.

Hi,I'd really like to add a youtube movie embed in the previewpane. But i can't figure out how.Can you help me?Martin

Martin at 04:09PM, 2012/07/14.

Great script. A quick query. Is it possible to have hyperlinks for the big images?

urban at 10:08PM, 2012/09/18.

running into an issue when I place it on my site, it is not loading the image into the main image location. any sugestions? location: tssairsoft.com/gallerytest.php

Eric at 01:09PM, 2012/10/19.

Hi,Can i add navigation buttons to this gallery which i can use to move to next image or previous so that i dont have to choose from the script?It will be very useful.

poonam at 04:43PM, 2013/02/12.

HI. Thank you for your script.

I made some modifications to match my site needs, but i want to show the thumbs horizontal under big picture with same arrow image .. for Left and right, how should look the code / or where i should do the mofications ?
here is actual script working on my site:
http://www.mamaia.com.ro/oferte/eforie~nord/hotel-anca~club-3-stele.php
i need to be under as i explained above, thank you.

I am beginner to javascript.

Daniel at 11:28AM, 2013/06/06.

Hello,I want to put vertical thumbnails on both sides of the big picture, how to do? Can me point me in te right direction?Groeten

Gert at 11:01AM, 2013/10/24.

I need a slideshow with vertical thumbnails for Wordpress. Can this one be used with Wordpress? If not, do you know of any others with vertical thumbs that work for WP? I'm having a hard time finding any online. Thanks

Metrov at 06:16PM, 2013/11/20.

I want to thank the developer for this slider

Tsvetan at 07:19AM, 2014/01/29.

Great job

Ami at 06:24AM, 2014/09/08.

It shows me following error:Object doesn't support property or method 'getElements'It shows at:this.previewImageParent = this.el.getElements('.theImages')[0];Can anybody help me to solve this

Ami at 06:29AM, 2014/09/08.

Good evening,I'm looking for a peculiar type of slideshow I would use to read enlarged music sheet piece after piece on a tablet's screen. I wonder if I would be able, with your help, to customize the above slideshow as follows:1) no thumbnails at all2) change of images triggered by an USB foot pedal (my hands are busy while playing)3) images width correponding to the entire width of the page4) running offline as a standalone HTML app.5) please note that I know approximately nothing at javascript :-(All that is because my vision (reading capability of music notes) becomes always more weak.Thank you for your attention and explanations.Best regardsPierre

Pierre Ruel at 05:18PM, 2016/02/03.