//Step 1: Insert the below into the section of your page: // JavaScript Document // Thumbnail Slider- by JavaScript Kit (www.javascriptkit.com) // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code /* 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).
That's it- the script will do the rest in populating this DIV with the entire interface that makes up the slider. Initializing the script To intialize a thumbnail slider, inside the HEAD section of your page, you should call the jQuery method $("#divid").imageSlider() after the DOM has loaded: $(document).ready(function(){ // on document load $("#thumbsliderdiv").imageSlider({ //initialize slider 'thumbs': ["church.jpg","fpslideshow/fisherman.jpg","fpslideshow/legs.jpg",""], // paths to images '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 }) }); "thumbsliderdiv" should match the ID of the empty DIV you've added to the BODY of your page that houses the slider, while the options inside this method modify the behavior of the slider. The "thumbs" option should be an array containing the paths to the images to be shown, each separated by a comma. If all of your images are in the same directory, an alternative way to specify the path of your images is to simply do so once inside thumbslide.js, near the end of the code where the default option values are defined. For the "images_path" setting, define the shared image path that gets added to all of your images inside the "thumbs" array. The look of the slider can be customized via CSS by editting the file thumbslide.css */