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


753 Comments

Post a comment

Comments pages: 1 12 13 14

  1. Manmal
    Posted on January 29, 2023 at 05:26 Permalink

    Great code!

    Reply
  2. yaron
    Posted on May 14, 2022 at 18:44 Permalink

    Hello,

    there seems to be a problem with jQuery v3.6.0
    When page is loaded, I get e.typeof is undefined.
    The workaround that was to install the following:

    Is there any plans to upgrade the jQuery thumbnail scroller to fully support jQuery v3.6.0 and above ?

    Reply
  3. krushna
    Posted on September 13, 2019 at 08:02 Permalink

    hi
    i was searching a vertical scroller and got your code. thanks a lot.
    i have one question. how can i show content/text on right side when i click on the thumbnail. is it possible?

    Reply
  4. sandy
    Posted on January 9, 2019 at 12:40 Permalink

    Hi, Nice & Informative article. Web designing company in Hyderabad is one of the best practices nowadays most of the organizations from startup to big brands are using. It’s very helpful in showcasing our business to the right person in right time. Very nice article. Found informative for me.

    Reply
  5. Carla
    Posted on September 28, 2018 at 18:00 Permalink

    Hi… Thank you so much for your plugin. You have no idea how you’ve saved me. It works great. But I was wondering… is it possible to also make the thumbnails scroll by using the mouse-wheel, that is, in addition to the hovering over the edges??

    Kind regards,

    Carla.

    Reply
  6. Hassan
    Posted on September 11, 2018 at 15:49 Permalink

    Hey Guys!
    Any idea how to implement this in a Shopify store? I know I have to add the jv and css files in the assets but what should I do next?

    Please help

    Reply
  7. Tri Bagus Soleman
    Posted on May 18, 2018 at 10:10 Permalink

    Why I can’t load data if my data more than 21 data from database ?

    Reply
  8. Repl Rex
    Posted on January 9, 2018 at 17:02 Permalink

    Trying to figure out how to change the scroll speed. Integer and ‘scrollSpeed’ do not work for me. Any ideas? I am changing it in jquery.thumbnailScroller.js file. Thanks in advance.
    It’s 2018 btw, not sure what changes have been made in the last couple years to warrant any code not working.

    Reply
  9. genius
    Posted on September 30, 2017 at 23:20 Permalink

    how can do that slider will auto-scroll

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

    Harsh Prajapati

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

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

    Reply
  12. 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
  13. Alex
    Posted on December 5, 2016 at 20:48 Permalink

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

    Reply
  14. 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
    • Matthew
      Posted on October 19, 2017 at 23:06 Permalink

      Old comment I know, but wanted the same thing. Simply css your img to be display:block and margin:auto.

      img {
      display: block;
      margin: auto;
      }

      Reply
  15. 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
  16. sap netweaver training in hyderabad
    Posted on August 1, 2016 at 15:25 Permalink
  17. 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
  18. 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
  19. 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
  20. 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
  21. Marcin
    Posted on March 1, 2016 at 10:51 Permalink

    Hi,
    how to turn on infinitve scrolling?

    Reply
  22. 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