Download image slideshow

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.

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

rotem cohen
wow man tank's it's great!!!
rotem cohen at 10:27PM, 2014/08/04.
jaouadnet
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.
Domi
Naon ngomong teh teu ngarti haingah ahhh !!! Mun ngarti Basa Uing kop tah jago teuing siah ahhaha !!!!
Domi at 09:12AM, 2014/10/23.
Sriskanth
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.
Vicki
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.
Vicki
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:27PM, 2014/11/01.

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