jQuery thumbnail scroller

Version 1.x.x usage guide

In order to implement the plugin, you first need to insert inside the head tag of your document the jquery.min.js (load it from Google CDN), the jquery-ui-1.8.13.custom.min.js (a custom build jQuery UI for custom animation easing) and the jquery.thumbnailScroller.css which is the file where you can style your scroller(s).

<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>

Next you’ll need to insert the markup of the thumbnail scroller with your images and links inside the body tag. The structure of the markup is exactly the same for every scroller instance. You can use class names e.g. .jThumbnailScroller or you can add a unique id for using multiple, different type scrollers on the same page.

<div id="tS2" class="jThumbnailScroller">
    <div class="jTscrollerContainer">
        <div class="jTscroller">
            <a href="#"><img src="thumbs/img1.jpg" /></a>
            <a href="#"><img src="thumbs/img2.jpg" /></a>
            <a href="#"><img src="thumbs/img3.jpg" /></a>
            <a href="#"><img src="thumbs/img4.jpg" /></a>
            <a href="#"><img src="thumbs/img5.jpg" /></a>
        </div>
    </div>
    <a href="#" class="jTscrollerPrevButton"></a>
    <a href="#" class="jTscrollerNextButton"></a>
</div>

The final step is to include the actual thumbnail scroller plugin (jquery.thumbnailScroller.js) and the function that calls and configures the scroller(s) at the end of your document, just before the closing body tag. We also add jQuery.noConflict(); for using the plugin along with other libraries (e.g. prototype, scriptaculous etc.). thumbnailScroller function selector can be id, class, tag name etc. (in this example the id of the .jThumbnailScroller div in the markup above).

<script>
jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);
</script>
<script src="jquery.thumbnailScroller.js"></script>

You can configure each scroller by setting the parameters of the function call as options

Options parameters

Multiple scrollers

To set multiple scrollers with different style and features on a single page, give them a unique id and add a function call for each one. For example:

<script>
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"clickButtons",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
    $("#tS3").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"vertical",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:800,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);
</script>

You can style all and each scroller separately in jquery.thumbnailScroller.css.

Scrolling long content

There’s a bug in jquery.min.js that resets to 0, an animate value greater than 9999 pixels. This bug will affect the scroller if content width or height is equal or greater than 10000 pixels, resulting a scrolling jerk. This annoying bug is going to be fixed on a future release of the library. Until then, we need to come up with a temporary solution and since editing jquery.min.js is not the best of practices, we’ll overwrite the jquery function containing the buggy code 😉
Insert the following code below the window load function:

<script>
/* function to fix the -10000 pixel limit of jquery.animate */
$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}
</script>

Check the multiple scrollers demo to see all type of scrollers in action. The image thumbnails used in the demos are the work of Alex Varanese (http://www.alexvaranese.com).