Download image slideshow

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 id="theImages"><DIV> section

This is done with the following HTML code:
<a href="#" onclick="showPreview('images/image1_big.jpg','1');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. Also notice the second parameter('1') which is sent to the showPreview function. This variable indicates which image caption we want to show(1 = first, 2 = second ...).

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 id="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.

var 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.

var displayWaitMessage = true;

You can modify the text in this wait message by changing the following HTML code:

<span id="waitMessage">Loading image. Please wait</span>

Advertisement:
A logo design contest at Logomyway