Image slideshow with back and prev buttons

This script shows the image gallery slide show with prev and next buttons. When clicked in the next button the next 6 images are displayed. when clicked on the thumbnail the image is popuped up. First all the small thumbnails are displayed. When clicked on the thumbnail image is enlarged.

<span style="font-weight:bold;">Add thumbnails</span>

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);returnfalse;"><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

SCREENSHOT