Download image slideshow

Demo

Bookmark and Share

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

Jay
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
DHTMLGoodies
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.
Jay
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
DHTMLGoodies
New version is now available. It has been rewritten with Mootools.
DHTMLGoodies at 07:05PM, 2011/02/17.
Waseem
Can we change main (big)image after x seconds ?
Waseem at 04:55PM, 2011/03/01.
Admin comment
DHTMLGoodies
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.
Waseem
Thankyou brother,
DHTMLGoodies wrote: #Waseem,No, you can't do that with this script. Maybe the new one(Image Gallery 2011) is what you're looking for !?
Waseem at 07:10PM, 2011/03/01.
Mark Moran
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.
akshaynaik
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.
Connie
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
DHTMLGoodies
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.
Andreas
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.
Andreas
wrong page.. stupid multitasking :/
Andreas at 09:38PM, 2011/05/16.
carly
I need help!!! I have a html file that I created in dreamweaver. I have the basic background and have a table with merged cells that I want to put this picture viewer in it but I cant seem to get it no matter what i do. I can change the images and all but how do i put it in? What about the css? I added that to my css but maybe i wasnt supposed to. Please HelpUntitled Documenta:link { color: #5282A7; text-decoration: none;}a:visited { text-decoration: none; color: #5282A7;}a:hover { text-decoration: underline; color: #636;}a:active { text-decoration: none;} home about me portfolio services contact          
"Happiness lies not in the mere possession of money it lies in the joy of achievement, in the thrill of creative effort." -Franklin Delano Roosevelt
photography                           Terms and Conditions  Privacy Statement
©2011,NVCC[CRN2393]-All rights reserved CRN2393 is Creating Websites - Spring 2011 Semester.
carly at 03:07AM, 2011/05/17.
azylum
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.
fluster
Great slide show code! I have been following these threads and still cannot find a solution to having multiple slide shows on one page. The first one works fine except that when an image is clicked, the largeImageCaption DIV shows up as 'undefined' rather than what I have. Firebug shows the code as 'undefined' but mine is not.The other slideshows do not scroll or enlarge a picture, rather, it appears as the bg picture in the first slideshow.Any suggestions?you can see the page hereThanks
fluster at 08:34AM, 2011/05/19.
Admin comment
DHTMLGoodies
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.
Andreius
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.
Andreius
azylum wrote: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


Same here in IE:

http://www.preferredgardens.com/portfolio-beforeafter-dev.html
Andreius at 09:12PM, 2011/05/25.
Admin comment
DHTMLGoodies
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.
Andreius
DHTMLGoodies wrote: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)


Brilliant! Much appreciated - now works as it should - have a wonderful day and thank you again!!!

- Andreius
Andreius at 01:09PM, 2011/05/26.
Andreius
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.
Andreius
... by scrolling vertical thumbnail strip down further all image descriptions show up there ...

Andreius wrote: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:48PM, 2011/05/27.
Admin comment
DHTMLGoodies
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.
Andreius
That did it, so another feather into your hat, Sir! :)
Andreius at 06:00PM, 2011/05/27.
magnus ojeonu
great work. how can i increase the number of images to 24
magnus ojeonu at 04:02PM, 2011/06/21.
Arny
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.
jenny
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.
Admin comment
DHTMLGoodies
jenny wrote: #
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, I will add support for vertical list of thumbnails to image Gallery 2011 soon.
DHTMLGoodies at 11:19AM, 2011/06/27.
Nicola
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.
Miro
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.
Miro
but anyway, it is great work! Thank you for that.
Miro at 11:37AM, 2011/07/25.
Lola
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.
Arnelg
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.
envirogov
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.
mats
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.
Vlad
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.
Darrel
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.
Matt Friend
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.
mike
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.
mike
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.
Mike
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.
guddu
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.
Paul
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.
Ashish
How can i fix the size of big image?
Ashish at 02:05PM, 2012/06/07.
Martin
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.
urban
Great script. A quick query. Is it possible to have hyperlinks for the big images?
urban at 10:08PM, 2012/09/18.
Eric
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.
poonam
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.
Daniel
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.
Gert
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.
Metrov
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.
Tsvetan
I want to thank the developer for this slider
Tsvetan at 07:19AM, 2014/01/29.
Ami
Great job
Ami at 06:24AM, 2014/09/08.
Ami
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.
Pierre Ruel
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.

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