Description: Thumbnail Slider lets you specify a list of images to showcase then automatically creates a two column interface with thumbnails of the images on the right and the enlarged image on the left to view on demand. Move the mouse over a thumbnail to view the larger version. The script supports the following features:
Simply define the images to show, and the script automatically creates the entire interface that makes up the slider.
Automatic or manual sliding
If automatic cycling, whether to stop after x cycles, and also, when the user clicks on a thumbnail
Enlarged image is centered within the viewport
Directions:
Step 1: Insert the below into the <head> section of your page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="thumbslide.js">
</script>
<link rel="stylesheet" type="text/css" href="thumbslide.css" />
<script>
//Initialization code:
$(document).ready(function(){ // on document load
$("#thumbsliderdiv").imageSlider({ //initialize slider
'thumbs': ["fpslideshow/church.jpg","fpslideshow/fisherman.jpg","fpslideshow/legs.jpg","fpslideshow/sunset.jpg","fpslideshow/tropical.jpg","livingroom.jpg","livingroom2.jpg"], // file names of images within slider. Default path should be changed inside thumbslide.js (near bottom)
'auto_scroll':true,
'auto_scroll_speed':4500,
'stop_after': 2, //stop after x cycles? Set to 0 to disable.
'canvas_width':700,
'canvas_height':500 // <-- No comma after last option
})
});
</script>
The above code references the following 3 files, which you should download below:
thumbslide.js
thumbslide.css
Image at> http://www.javascriptkit.com/script/script2/selected.gif
Step 2: Where you wish the slider to appear in the BODY of your page, insert an empty DIV with a ID attribute. The value of the attribute should match that defined inside the initialization code (more on that later).
<div id="thumbsliderdiv"></div>
That's it- the script will do the rest in populating this DIV with the entire interface that makes up the slider.
