New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
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 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>
Post your comment
Comment preview: