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

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 - 2024 dhtmlgoodies.com