Thumbnail Slider

This script allows you to create a scrollbar for thumbnails with next and previous arrows. The thumbnails can be of any size and the arrows can be images or text.

Example

Usage

Save the attached javascript files and add the following to the head of your html:

<script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/effects.js"></script> <script type="text/javascript" src="thumbs-slider.js"></script> <script type="text/javascript" src="photoscroller.js"></script>

Import the css. For example:

<link rel="stylesheet" href="thumbs-slider.css" />

Add the following code - add as many thumbnails as you like and (optionally) a href link:

<div id="thumbnailsViewport"> <div id="thumbnailsSlider"> <ul id="photoList"> <li><a href=""><img src="thumb1.png" alt="" /></a></li> <li><a href=""><img src="thumb2.png" alt="" /></a></li> <li><a href=""><img src="thumb3.png" alt="" /></a></li> </ul> </div> </div>

Add the next and previous links (wherever you like). Note: scrollPhotos(80) scrolls the thumbnails to the right by 80 pixels and scrollPhotos(-80) scrolls the thumbnails to the left by 80 pixels. Adjust this value to suit your thumbnail sizes. For example:

<a href="javascript:void(0);" onclick="scrollPhotos(80);" title="prev"><img src="arrow-left.png" alt="prev" /></a> <a href="javascript:void(0);" onclick="scrollPhotos(-80);" title="next"><img src="arrow-right.png" alt="next" /></a>

Next, edit photoscroller.js to adjust the DURATION of the scroll (time it takes between starting and stopping). Also, if you add a margin or a border (or both) to your thumbnails, you'll need to add the margin and border together, multiply by two and set this to the BORDER_OFFSET varialbe. You may also wish to edit thumbs-slider.css to alter the width of the scrollbar (600px by default) and the size of the thumbnails (40x40px by default). That's it!

Download

Click here