This website uses cookies to personalise ads and to analyse traffic ok
web design

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

scrollerType: String
Scroller type based on mouse interaction, values:
"hoverPrecise"
(default)
"hoverAccelerate"
"clickButtons"
scrollerOrientation: String
Scroller orientation, values:
"horizontal"
(default)
"vertical"
scrollEasing: String
Scroll easing type only for hoverPrecise type scrollers
See jquery UI easing for all available easing types
scrollEasingAmount: Integer
Scroll easing amount only for hoverPrecise and clickButtons type scrollers (0 for no easing).
Example:
scrollEasingAmount:800
acceleration: Integer
Acceleration value only for hoverAccelerate type scrollers, default: 2
scrollSpeed: Integer
Scrolling speed only for clickButtons type scrollers, values: milliseconds,
Example:
scrollSpeed:600
noScrollCenterSpace: Integer
Scroller null scrolling area only for hoverAccelerate type scrollers (0 being the absolute center of the scroller and the default value), values: pixels
autoScrolling: Integer
Initial auto-scrolling (0 equals no auto-scrolling and the default value), values: amount of auto-scrolling loops
autoScrollingSpeed: Integer
Initial auto-scrolling speed, values: milliseconds,
Example:
autoScrollingSpeed:8000
autoScrollingEasing: String
Initial auto-scrolling easing type
See jquery UI easing for all available easing types
autoScrollingDelay: Integer
Initial auto-scrolling delay for each loop, values: milliseconds,
Example:
autoScrollingDelay:2500

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).

Pages: 1 2 3


743 Comments

Post a comment

Comments pages: 1 12 13 14

  1. Maulik Patel
    Posted on June 8, 2017 at 15:34 Permalink

    Harsh Prajapati

    Reply
  2. kaji
    Posted on February 7, 2017 at 08:53 Permalink

    Can we stop scrolling on mouse click or hover wherever we need.

    Reply
  3. Ameen Shan
    Posted on February 6, 2017 at 21:02 Permalink

    Hi,
    Great plugin,Working perfectley ,
    Is it possible to add multi[le scrolling methord for a single id.

    like both click and hover
    $(“#my-thumbs-list”).mThumbnailScroller({
    axis:”y” ,//change to “y” for vertical scroller,
    type:”hover-50″,
    contentTouchScroll :50
    });

    $(“#my-thumbs-list”).mThumbnailScroller({
    axis:”y” ,//change to “y” for vertical scroller,
    type:”click-50″,

    });

    Reply
  4. Alex
    Posted on December 5, 2016 at 20:48 Permalink

    .mTS_horizontal .mTSContainer { margin-left: auto !important; margin-right: auto !important; }

    Reply
  5. Alex
    Posted on August 16, 2016 at 06:49 Permalink

    Malihu, thank you for such a great js plugin!

    I have only a small issue: can’t center thumbnails if their overall width is less than of the container. So they are aligned to the left.

    If I’m not blind (don’t see in config section) and such feature is not implemented in this version of the plugin, I’m requesting such feature in new releases! 🙂

    Yes, this can be achived with callbacks-counting-offset, but it becomes complicated.

    What do You think, Malihu?

    Reply
  6. Hills
    Posted on August 10, 2016 at 08:22 Permalink

    hi Thanks for this great Job!
    I want to scroll a grid box of 15 list items and display 9 list items first and 6 list item… when scroll is activated.
    Can u help me please

    Reply
  7. sap netweaver training in hyderabad
    Posted on August 1, 2016 at 15:25 Permalink
  8. Hyginus
    Posted on June 28, 2016 at 07:33 Permalink

    Hi this is a great script for me. please could you explain how I can get this to work on desktop using hover and same time on Mobile using touch

    Reply
    • malihu
      Posted on June 28, 2016 at 09:33 Permalink

      The plugin works with regular mouse and touch (you don’t have to do anything). In touch devices you just touch swipe thumbnails. Do you have a particular issue with a device?

      Reply
      • Ashish
        Posted on August 2, 2016 at 12:30 Permalink

        The scroller goes on infinite scroll on touch devices. It won’t stop at the end of the list but keep on scrolling white no any elements inside, just white background.

        Reply
  9. Alek
    Posted on June 8, 2016 at 15:41 Permalink

    Hi!
    Great plugin!

    Have a question about optimalization. When I use a multilevel thumbnails grid to move entire website from left to right there is a problem with smothness. There’s little of shaking. When I use 32gb ram, i7 pc its works fine but in regular pc’s there is a problem with that. Have any suggestion?:)

    Regards,
    Alek

    Reply
  10. Daan
    Posted on April 21, 2016 at 23:01 Permalink

    If wanted to initially scroll to the middle of thumbnail (or other) content, how would i do that? element.scrollLeft(n) doesnt seem to work and seems to be overwritten?

    My div is 5000 px wide and i want to initially show it @ 2500 px.

    Reply
  11. Marc
    Posted on April 11, 2016 at 13:30 Permalink

    Hi, thanks for this great script.

    But I have a question: Is it possible, that the images are continuing scrolling while holding down the mouse button over the arrows instead of clicking the button?

    Reply
  12. Marcin
    Posted on March 1, 2016 at 10:51 Permalink

    Hi,
    how to turn on infinitve scrolling?

    Reply
  13. Nadir Latif
    Posted on February 11, 2016 at 14:40 Permalink

    Excellent plugin. It works well. I used it to implement horizontal scrolling playlist for JWPlayer 7. See screenshot: http://pakjiddat.com/wp-content/uploads/2016/02/jwplayer-integration-750×410.png.

    Thanks for your plugin.

    Regards,
    Nadir Latif

    Reply

Comments pages: 1 12 13 14

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php