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 10:13AM, 2011/02/17.
Admin comment
DHTMLGoodies
Hi

It 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 10:28AM, 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 10:46AM, 2011/02/17.
Admin comment
DHTMLGoodies
New version is now available. It has been rewritten with Mootools.
DHTMLGoodies at 12:05PM, 2011/02/17.
Waseem
Can we change main (big)image after x seconds ?
Waseem at 09:55AM, 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 10:08AM, 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 12:10PM, 2011/03/01.
Mark Moran
Hi !
I got a new trouble whit IE8 dosent work java script

Any 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 10:51AM, 2011/03/07.
akshaynaik
i want t display movie poster and its corresponding rating(which is an image of stars ) image at its side

also image name is stored in sql database

can 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 empty


im using asp.net and c#

plz help bro
akshaynaik at 08:37AM, 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 12: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 05: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 03:20PM, 2011/05/16.
Andreas
wrong page.. stupid multitasking :/
Andreas at 03: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 Help







Untitled Document


a: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 09:07PM, 2011/05/16.
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 ?

tks
azy
azylum at 02: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 here
Thanks
fluster at 02:34AM, 2011/05/19.
Admin comment
DHTMLGoodies
Fluster,

You are not using the script on this page, but the one at

http://www.dhtmlgoodies.com/index.html?whichScript=image_slideshow

Unfortunately, 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 12: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 02: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 ?

tks
azy




Same here in IE:

http://www.preferredgardens.com/portfolio-beforeafter-dev.html
Andreius at 03: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 02: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 07:09AM, 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 07:43AM, 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 07:48AM, 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 11:22AM, 2011/05/27.
Andreius
That did it, so another feather into your hat, Sir! :)
Andreius at 12:00PM, 2011/05/27.
magnus ojeonu
great work. how can i increase the number of images to 24
magnus ojeonu at 10:02AM, 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 immensely

Thanks,
Arny
Arny at 07:38AM, 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 03: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 05: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 12: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 05:35AM, 2011/07/25.
Miro
but anyway, it is great work! Thank you for that.
Miro at 05: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 07:27PM, 2011/08/23.
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 04: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 12: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 10:31AM, 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 12: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 11:52AM, 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 09:54PM, 2011/10/11.
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 05:34PM, 2011/12/05.
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 07:34PM, 2011/12/05.
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 noob

Mike
Mike at 01: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 12: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 01:17PM, 2012/03/16.
Ashish
How can i fix the size of big image?
Ashish at 08:05AM, 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 10:09AM, 2012/07/14.
urban
Great script. A quick query. Is it possible to have hyperlinks for the big images?
urban at 04: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 07:09AM, 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 09:43AM, 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 05: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 05: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 11:16AM, 2013/11/20.
Tsvetan
I want to thank the developer for this slider
Tsvetan at 12:19AM, 2014/01/29.
Ami
Great job
Ami at 12: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 12: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 all
2) 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 page
4) 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 regards
Pierre
Pierre Ruel at 10:18AM, 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