New on DHTMLGoodies.com:

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

Download image slideshow

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.

Add images to slideshow

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

This is done with the following syntax:
<a href="#" onclick="showPreview('images/image1_big.jpg');return false"><img src="images/image1.jpg"></a>

image1.jpg is the small image, while image1_big.jpg is the larger version of image1.jpg, i.e. the image that is loaded into the preview pane

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 id="previewPane">
<img src="images/image1_big.jpg">
</div>

Add image captions

Image captions are added right below the <A> tags for your small images. Example:

  <div class="imageCaption">This is the caption of image number 1</div>
  <div class="imageCaption">This is the caption of image number 2</div>
  <div class="imageCaption">This is the caption of image number 3</div>
  <div class="imageCaption">This is the caption of image number 4</div>
  <div class="imageCaption">This is the caption of image number 5</div>
  <div class="imageCaption">This is the caption of image number 6</div>
  <div class="imageCaption">This is the caption of image number 7</div>
  <div class="imageCaption">This is the caption of image number 8</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

Comments

A very simple and pleasing image slideshow. I really like this.Thanks!

Anjan kumar at 08:07AM, 2011/02/18.

Cloud it be play the photos automatically?

R at 02:59AM, 2011/02/23.

Admin comment

"R", That's a very good suggestion. I will either update this script or create a new similiar slideshow script with that feature very soon.

DHTMLGoodies at 10:00AM, 2011/02/23.

This runs fine in firefox 3.15, but in ie8, the images will not show up in the gallery container. Any idea why?Thanks!

Kevin Longpre at 03:38AM, 2011/02/24.

Admin comment

Kevin Longpre, I need to know more about your site in order to help you. Look for Javascript errors. Also make sure you're using a proper doctype at line 1 of your HTML."R", A new slideshow script has been released today which got a "play" functionality.

DHTMLGoodies at 04:55PM, 2011/02/24.

Hi, i would like to change height of image, but never happens when i try to doit on CSS:

#theImages{ position:absolute; height:200px;

Mark Moran at 12:23AM, 2011/02/25.

Admin comment

Karl, Perhaps it would work if you add the following line:imageGalleryObj.style.left = (40 - document.getElementById('slideEnd').offsetLeft/2 + galleryContainer.offsetWidth/2) + 'px';at the bottom of the initSlideShow function. Just insert it right above gallerySlide();Mark,#theImages{position:absolute;height:200px; will only resize the DIV element, not the image. If you want to resize the image, you'll have to resize them manually in an image editor.

DHTMLGoodies at 12:28PM, 2011/03/01.

Alf - that's fantastic, many thanks for posting that, I was at a loss and you really helped me out. Have sent a donation your way. Tack!

Karl at 01:53PM, 2011/03/01.

Mr. Karl, i fix the problem, tkx a lot.I just have new one : IE dosen't work good. Don't play js.I splited this image_slideshow code to embeded into my html template.Now work so good on firefox, opera, etc. but IE never.And i would like to eliminate o reduce focus effect, into firefox is good, but IE8 or less version always show focus effect.I'm tryig the new code in this post, i'chek up now.

Mark Moran at 07:23PM, 2011/03/07.

I'm waching "new image_slideshow", this works so good in all browsers...I'll check this one version.Hoo, i got a new question about:How can I place same code :

Image caption here, image 1

This caption will go below of image.I would like use same code for same images, but in this case, a description goes here:Ex.:

Image Caption image 1+---------+| image 1 |+---------+Image Caption image 1 (Replaced descrption)

I've try a several times, putting code any place, but dont work so good. Maybe i mistake where to place...The list of image caption class, alway appear like a list, never hide. Let me try again whit new version, an write solution if works for me.

Mark Moran at 08:07PM, 2011/03/07.

Last one question:On IE, i don't like to use this part of js: function showImage() { if(activeImage){ activeImage.style.filter = 'alpha(opacity=50)'; activeImage.style.opacity = 50; } this.style.filter = 'alpha(opacity=50)'; this.style.opacity = 50; activeImage = this; }How can i fix this effect? of course, in this particular case, i don't need to use it.Tks 4 all your colaboration.On FFX and others browsers works good, a clean image displayed, no focuse effects showed.

Mark Moran at 11:43PM, 2011/03/07.

Admin comment

Mark,You can safely remove activeImage.style.filter = 'alpha(opacity=50)';and this.style.filter = 'alpha(opacity=50)';which are the two lines used by IE

DHTMLGoodies at 10:48AM, 2011/03/08.

I've been experimenting with the slideshow, and it works great as long as it runs on the same page. However, when you try to run multiple slideshow lists on the same page, only one seems to work. The setup I tried was (1) create multiple Is there a way to encapsulate the script in a object (hiding globals that might be colliding now) so it would run strictly local to a 'pop up' div launched using jquery?

pete markiewicz at 03:56PM, 2011/03/11.

Hello,My images are not the same size, and therefore, when shown in the preview panel they expand...Please take a look:For instance, the first image source is :http://www.asteinarts.com/artwork/1.jpgthis is a long imageThe page I am building is here: http://www.asteinarts.com/galleryshow2.htmlThe image stretched to cover the preview area...Is there any way the image shows with its true dimensions instead of stretching? Your help is greatly appreciated, Thanks for building and sharing such nice script!Maritza

Maritza Neely at 06:22PM, 2011/03/14.

Admin comment

Maritza,Some work needs to be doe with this script in order to support different sized images properly.However, the new script Image Gallery 2011 supports this. Perhaps it could be an alternative!?URL: http://www.dhtmlgoodies.com/index.html?whichScript=image-gallery-2011

DHTMLGoodies at 11:56AM, 2011/03/15.

Hi. I am using your gallery in one of my projects for test basis. The problem is, that when there are minimum number of images, it just goes through some wiered effects. just try deleting some images from your gallery. Leave just two images in your html and see what happens.

themajiks at 01:18PM, 2011/03/15.

Tks, a lot,!! i found my error bug!And i get new ver. about howto split code into my template webdesign!I follow your tips.God Bless You!

Mark Moran at 06:51PM, 2011/03/19.

I got a new Q.Always, when i recive my email notify, the links never put the righ "post" or answer to find it.dhtmlgoodies have any error about link answer to see directly who respond my questions.post@dhtmlgoodies.com to me show details 9:19 PM (15 hours ago) Hello Mark Moran,There is new comment (written by softrainfall) on www.dhtmlgoodies.com, article "". \\---error???--//To unsubscribe from comments on this article, click here.- Show quoted text -Please, check this.

Mark Moran at 06:57PM, 2011/03/19.

Great piece of code! I have it running with 9 images just fine on one page but I'm running into problems with 16 images on another page in the same site. I've posted in the forums but no answer yet. http://www.dhtmlgoodies.com/forum/viewtopic.php?f=45&t=13395All the info is there... if anybody would care to take a look and perhaps offer some suggestions.Thanks...

Noel at 10:46PM, 2011/03/26.

Reading over my post I realize I forgot to mention the problem I'm having with the slideshow that has 16 images...Everything appears to load correctly when you land on the page: http://www.sallysbbq.com/pages/locations_NEW.shtmlThe thumbnail images that are visible do respond when you click on them. However, if you move your cursor over either of the navigation (arrow) graphics, all of the thumbnail images slide over to the right leaving only a portion of the first thumbnail visible! Very strange. If you reload the page it all looks good again.I have another slide show with 9 images on another page that works just fine: http://www.sallysbbq.com/pages/media.shtmlAny ideas?Thanks,Noel

Noel at 12:37AM, 2011/03/27.

Hi Thank you for the slide show but to be activated automatically if the display is very A.

Alireza at 09:54AM, 2011/03/28.

Admin comment

Marc,By specifying a z-index for your menu, I think the problem is fixed, example:inside style.css add#navigation ul{ z-index:10000;}

DHTMLGoodies at 03:30PM, 2011/03/29.

Hi

Thank you for posting the gallery, it's been a real challenge tracking down a clean and simple design like this one which is ideal. However...

I'm quite new to coding (javascript in particular) so please bear with me. I downloaded the zip folder and placed it in a local loaction to add to my practice page. As an initial test to customise the gallery I simply tried replacing the image jpg's with my own using the same files names to avoid error. This creates some very odd behaviour, sometimes the images load into the preview and thumb slide and sometimes they don't. If they don't it will sometimes allow me to right click the icon and select "show images". Again this only works on occassion. As soon as I replace the original images that come with the demo, they all load fine without a problem. I'm baffled! Any help would be appreciated.

Adam at 04:25PM, 2011/03/29.

Disappearing thumbnail images - SOLVED!F.Y.I. - I found a missing "

Noel at 05:26PM, 2011/03/29.

Thank you so much for the simple photo gallery! It's the cleanest looking one I've found so far!

However, I'm having a small problem getting it to work correctly on my website. The thumbs seem to be adding more space between them then necessary and the slide arrows are disappearing on me!

HELP!

http://dkyphoto.net

Sarah at 08:09PM, 2011/03/29.

Hi,

Further to my previous post I've also tried resizing my images to match those of the demo before replacing the jpg files. This made no difference, they just won't show in the preview or in the thumbnail slide. The weird thing is, as soon as I replace the originals it all starts working fine again and all images display without a problem?? It appears to be a file specific issue as I'm not altering any of the code at all, just overwriting the image files with my own. Is there any code I'm not aware of that specifies the image files other than the file name itself? I'm at a complete loss??? This gallery is absolutely perfect and I would love to get it working.

Thanks again.

Adam at 09:48AM, 2011/03/30.

Admin comment

Adam,Do you have some web-address where you can post a demo of your non-working slidehow ?I think I need to see it in order to help you.

DHTMLGoodies at 12:22PM, 2011/03/30.

HI!

I'm having trouble getting this awesome slideshow to work properly! I followed all the directions and uploaded everything, however, the thumbnails are spaced funny and the slides arrows disappear when you hover over them! I've about pulled all my hair out trying to figure out why!

http://dkyphoto.net/adults/index.html

please help!

Sarah at 01:38PM, 2011/03/30.

Admin comment

Sarah,

Could you try to do the following:

Replace the doctype at the top of your html file (line 1) with this:

<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 4.0 Transitional// EN" "http://www.w3.org/TR/html4/loose.dtd">

DHTMLGoodies at 01:44PM, 2011/03/30.

I tried
now and it's doing the same thing still. I just can't see why it would be acting up.

http://dkyphoto.net/adults/index.html

Sarah at 02:27PM, 2011/03/31.

Admin comment

Sarah,I think I know what the problem is. You should either1) Put the arrow-images inside a sub folder called images, i.e. change your html code to<div id="arrow_left"><img src="http://dkyphoto.net/adults/images/arrow_left.gif"><div id="arrow_right"><img src="http://dkyphoto.net/adults/images/arrow_right.gif">or2) Make this change to image-slideshow.js:Line 42: Replace existing line with this:this.getElementsByTagName('IMG')[0].src = this.id + '_over.gif';Line 58: Replace existing line with this:this.getElementsByTagName('IMG')[0].src = this.id + '.gif';

DHTMLGoodies at 03:42PM, 2011/03/31.

Thank you! It worked! Great slideshow! Funny how small changes like that make all the difference! I would have never thought of that on my own! Thanks again!

Sarah at 07:15PM, 2011/03/31.

Hi, First I wanted to thank you for this great slideshow, its really clean and you can adapt it to almost any layout with the propper css, but IÂ´m having a problem with it and IÂ´ll like you to help me, Im building a slideshow for my design project and I can add as many images as I want with no problems at all but when I got down the images and add the 8+ to 20th description of the 8+ to 20image it doesnt work, when you get to the 9th image it will display the 1st description again on a cycle where the 10th is the 2nd desciption and 11th is the 3rd description and so on.. comes to 8th description again on the 16th image and plop again on the 1st description for the 17th image and so on, it does the same on chrome, firefox and IE :SAny help would be really appreciated, thank you!

Eduardo at 08:53PM, 2011/04/15.

Hi Guys,I am using your script - I really like it a lot! Kudos, BUT it looks like the script is caching on the page so my main image and several thumbnail images do not show up when the page is refreshed. Is there a way that I can clear the cache of variables or whatever to make it load correctly each time the page loads?Please let me know. I've tried everything I can think of to fix this, to no avail. I though everything was working fine until I happened to catch this error. I'm on a strict deadline and I don't want to have to find another script to make this work.Thanks again for your great programming, I think this is going to be great once I work out the little bug.Cheers,Kato.

Kato at 02:34AM, 2011/04/20.

I really like this gallery. How would I go about making the thumbnails loop so that when the last image is reached it starts over with the first?

michael at 06:26AM, 2011/05/07.

Wow, a FREE Slideshow Maker Service for Web APP,can use it for ANY web APP, even WordPress, PHP-Nuke, Joomla, DotNetNuke, Magento, Drupal,..., ANY website and ANY weblog Themes. a sample use available in download files.----------------------------------------------WHAT IS DOLPHIN SLIDESHOW MAKER ? Dolphin Slideshow Maker is a powerful and perfect slider service made for web designers. With Dolphin SlideShow, you can organize any type of web content into a beautiful and user-friendly slider. Benefits: *Saves Development Time *Beautiful Default Design *Powerful Features & API *Diligent Support----------------------------------------------Main Site : http://www.DolphinSlideshow.com,FREE LICENSE version : http://www.DolphinSlideshow.com/downloads/DolphinSlideshowMaker.zipPRO LICENSE version : http://codecanyon.net/item/dolphin-slideshow-maker/309834?ref=SmartTeamVideo Tutorials : http://www.DolphinSlideshow.com/TutorialLive Preview Demo Login: http://www.DolphinSlideshow.com/DemoUsername: adminPassword: admin

Smart Team at 05:41AM, 2011/07/15.

Great tutorial! Works perfectly!One question I have for you, is there a possibility to be able to arrows the rest on top of the large image so a user and click on them to change the image instead of always having to click on a thumbnail to change the image. Your help is greatly appreciated.Many thanks,Alan

Alan at 02:17PM, 2011/08/09.

Currently working with this to make clean galleries on my portfolio site, but am having some trouble getting this two work. There seems to be two different problems: The first is that the arrows disappear and become broken images after the mouse has hovered over them (on mouse out?), which I imagine is a small fix.The bigger problem is that the images when clicked don't do anything; the preview pane does not change and the only visible change is the url changes to add a pound sign at the end.The page I've been working on is here: http://cerasmith.com/abecedarian.html Any tips would be wonderful (I've only just started working with building sites, so I'm sure there are obvious errors. :/)Thanks!!!

Cera Smith at 03:36AM, 2011/08/10.

I am trying to get the script to run however I get an error that says "Object Required" and references line 109 Char 3.

Line 109 says= minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;

Any help is appreciated.

David at 06:04PM, 2011/08/25.

The function that makes the slideshow autoplay isn't working yet?Thank you! And congratulations...

Bruno Fernandes at 03:44PM, 2011/09/21.

First I want to thanks for you inner most work to creating such wonderful sideshow. So, I want to use you scripting, which i really in need of it to develop my gallery section.Thanks again for your great programming.thanks

Prem at 05:26AM, 2011/09/24.

Please help! I am new to css and I am trying to use this slideshow code on a website I am working on and it doesn't work. Please check it out atwww.multiroll.net/samples.htmlI have loaded the javascript, css and html into my page's code. I have also loaded the images and the captions. However, it doesn't "slide" to the right to view other photos and the captions aren't showing up. What have I done wrong?

Nancy at 11:01PM, 2011/09/28.

Please help! I am new to css and I am trying to use this slideshow code on a website I am working on and it doesn't work. Please check it out atwww.multiroll.net/samples.html

df at 02:32PM, 2011/10/08.

I hope someone could help me with this script. I really only wanted the filmstrip portion as I had added another script to allow my filmstrip to open on the same page to display the full size image with caption and scroll to the right or left and close option. Similar to the way it's done on facebook. However, the filmstrip portion only works for a single strip setting. Another words, my first filmstrip works with it's right or left arrow function, but my other (multiples, like 10 of them) filmstrips wouldn't scroll right or left or change from opacity to image. Only my first filmstrip row. You can see what I mean ... http://usgwarchives.net/id/ppcs-id(new).htmlI know it has to do with the javescript. I am a bit dense when it come to that language.Thanks,Matt Friend

Matt Friend at 03:59PM, 2011/10/11.

Well, I am not good with javascript. I need your help to implement lightbox in your scriptThanks for your great time, you have done a great script.thanks

Remi at 06:35PM, 2011/10/17.

HiThank you so much for the slideshow. I love it!One question....I want to add a second way of navigating through the images in the slideshow. I want to have the slideshow working so that if someone were to click on the large preview images, the slideshow would automatically move forward to load the next slide.For example, there is already one way to navigate through the slideshow using the scrolling thumbnails. I want to add a second way to navigate through the images whereby a user can just click on the large preview image box and the image automatically switches to the next slide.Can you help me with this???I am pretty sure that I need to add something to the js however, I only write CSS and not js so I don't know what to add.Thank you!!!

Sarah W at 03:16PM, 2011/11/04.

How can I make the large image clickable. I have managed to add a hyperlink to the description of the large image but what i would like to do, is for to be able to click on the large image which then opens up another page in the same window. Is that possible.

Munders at 11:00AM, 2011/11/06.

Hello! There seems to be a small bug in the slideshow - when the slideshow loads, and you the first image is in the main window, if you click on the corresponding thumbnail of that image, the caption disappears. It only happens when you click on the first thumbnail right off the bat. Think you could help? I'm new at this! Thanks!

Lauren at 10:15PM, 2011/11/16.

Hi!
It's really super slideshow, but it doesn't works on Chrome...
It's good on FireFox and Opera, but on Chrome when I clik on the thumbs it displays the "image loading, bla-bla" message, and nothings happens, the massege stay, and there is no pictures...

Dominik Kis at 12:52AM, 2011/12/15.

I just started trying to setup a gallery with the code you provide here and I got everything working except for one small bug I can't figure out. You have this set to handle 8 thumbnails, I copy-pasted the set of 8, 3 times. I needed 31 pictures. It works fine, but between the 8th picture thumbnail and the 9th picture thumbnail the "picture 1" is recycling. Every 9th picture is the original "picture 1" and then it continues for 7 more just fine down the list until "picture 1" again. Any idea what would be causing this?

Eziodjinn at 07:32AM, 2011/12/16.

Nevermind I cleared the problem up. Don't code when you're tired.

Eziodjinn at 07:46AM, 2011/12/16.

Hey. I don't have experience at this and I must say that is very hard for me, although I searched alternatives and I found some websites that can provide exactly what a noob needs. I will tell you guys just the name of one website that really impressed me, www.flashxml.net for the ones who knew about this website, ha ha, sorry but I am slow. The point is that the possibility to customize so easy and so much a product is just awesome. It just saved me a lot of time and it isn't complicate at all. Best wishes.

Richard at 04:38PM, 2012/01/23.

Thanks a Lot

Veni Narayanan at 06:11AM, 2012/01/31.

Hi !I don't know how to play slide auto.You can help me !

aloha at 02:55PM, 2012/01/31.

Great slideshow, can I get the thumbs to display on the top and the big img under it? Thanks

Mike R at 01:35PM, 2012/03/02.

thank you sooooooooooo much

it really did halped me alooooooooot

ice at 03:42PM, 2012/03/23.

The captions for each pic . . . is there a limit. I have some historical pics and some of them need some explaining to understand the pic.

DrD at 05:55PM, 2012/04/23.

Thank you for this wonderful slideshow!is it possible to link each generate preview image to a new page by putting? I was only able for the default preview image..Would be grateful for your help! all the best!xian

xian at 08:54AM, 2012/05/22.

Is there any way you can scroll left and right by using the arrows on your keyboard rather than clicking on the images?Also, how do you resize the thumbnails?

Joseph at 08:52PM, 2012/06/14.

Hiiits working fine in ie, but its not working in mozilla,chrome.left & right arrows at thumbnails are disappering.in Mozilla Arrows are not working fine.I donwant the left & right Arrows to diaappear when i roll mouse on them.please check http://tarrytavern.9scale.com/gallery.htmlplease help me .Thanks

mohan at 12:43PM, 2012/07/19.

May I please know how to change the position of the gallery container? It is in the middle of my images. I want it to be at the bottom of the big images.Thank you.

Kevin at 03:35PM, 2012/07/27.

OlÃ¡, bom eu instalei o slide-show mas nÃ£o esta funcionando corretamente, as miniaturas estÃ£o em cima e as setas nÃ£o aparecem, ja tentei de quase tudo.

Mateus at 01:05PM, 2012/11/20.

1st i would to say Thanks guys for that great effort, but i want ask about small thing :D :D , how can i added this script to my website pages.. :)

Mooody at 12:28AM, 2013/04/06.

can u send me full code i.e HTML ,CSS, JS . plz send me to the mail....! help me plz i need it now.

Raja at 07:07AM, 2013/06/04.

I wrote similarly to this in Java at http://www.javatheprogram.blogspot.com/2013/05/image-slideshow-program.html.

Dara at 04:19AM, 2013/06/16.

awesome but want to fix the image size..it varies from image to image plz ??

Roshan at 11:46AM, 2013/06/28.

I want to slide images with different styles. Please provide me the suitable code.

Rahul Kumar at 12:51PM, 2013/07/17.

not working

shrey at 10:21AM, 2013/08/01.

I'm sorry but how exactly do I put this on my site? thanks!

morgan at 09:45PM, 2013/08/08.

i dont even know what to do with the java script !!!!!i never used JavaScript before can someone tell me how to use it ???

nina at 11:08PM, 2013/09/19.

I like this.Thanks!

mohamad at 12:44PM, 2013/12/23.

Sir, I click on the image being shown and then I see "Loading images, please wait...." and it keeps waiting, what is it?Regards

Abdussami Tayyab at 04:34PM, 2014/01/20.

I want the images to change manually i.e on clicking the next button and not by hovering the mouse. How is it possible

Amandeep Singh at 05:14AM, 2014/07/12.

wow man tank's it's great!!!

rotem cohen at 10:27PM, 2014/08/04.

Is there a way to encapsulate the script in a object (hiding globals that might be colliding now) so it would run strictly local to a 'pop up' div launched using jquery?in http://cartoon-network-arabic.com

jaouadnet at 10:28PM, 2014/08/19.

Naon ngomong teh teu ngarti haingah ahhh !!! Mun ngarti Basa Uing kop tah jago teuing siah ahhaha !!!!

Domi at 09:12AM, 2014/10/23.

Hi How to do slow moving slider when I point to the left and right arrows?Thank youSriskanth

Sriskanth at 02:01PM, 2014/10/28.

http://www.snapwebapps.com You can embed this free image slider widget inside your web page. It's just a code you copy and paste into your page or anywhere you want to embed it. It's free and you can use it on unlimited pages.

Vicki at 02:26PM, 2014/11/01.