Your IP: 38.107.191.111
DHTML Image Slide Show
|
Download script
You can download the entire script from this Download Source Code .
Setup
Add thumbnails
Thumbnails are inserted into the HTML code in the following format
<div class="strip_of_thumbnails">
<div><a id="firstThumbnailLink" href="#" onclick="showPreview('images/image1_big.jpg',this);return false;"><img src="images/image1.jpg"></a></div>
<div><a href="#" onclick="showPreview('images/image2_big.jpg',this);return false;"><img src="images/image2.jpg"></a></div>
<div><a href="#" onclick="showPreview('images/image3_big.jpg',this);return false;"><img src="images/image3.jpg"></a></div>
</div>
<div class="strip_of_thumbnails"> is the parent element of a vertical "strip" of thumbnails. How many thumbnails you add inside this div depends on your layout. In the demo, I have used 3 images.
Also note that id="firstThumbnailLink" is only applied to the first thumbnail. It is used to initially highlight this thumbnail
Layout
Width, height, border colors etc. are controlled by CSS. Look at the comment in image-slideshow-5.css for help.
Initialize the script
The slideshow script is initialized with these lines at the bottom of the HTML file:
<script type="text/javascript">
initGalleryScript(); // Initialize script
</script>
Speed of animations
You can control the speed of how fast the opacity changes on the large images, and how fast you want the thumbnail pane to slide when you click on the arrows. This is done by adjusting the javascript variables opacitySpeed, opacitySteps, slideSpeed and slideSteps at the top of image-slideshow-5.js.
Number of thumbnail columns
Usually, the script is able to measure how many columns of thumbnails you have automatically. However, if you have a slideshow where the script isn' table to show all your columns, you can set number of columns manually at the top of image-slideshow.js. This is done in the variable var columnsOfThumbnails
