Categories:

Home / Free JavaScripts / Image Slideshows & Galleries / Here

Cut & Paste Thumbnail Slider

Credit: JavaScript Kit

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

Example:

Directions:

Step 1: Insert the below into the <head> section of your page:

The above code references the following 3 files, which you should download below:

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.

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


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.