web design

jQuery thumbnail scroller

jQuery thumbnail scroller

A cool jquery/css thumbnail scroller plugin inspired by the ones made in Flash. It works by cursor movement or next/previous buttons, has auto-scrolling feature and it’s simple to configure and style through css.

How to use it

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

Changelog

  • Oct 8, 2011
    • Changed anchors css display property to block and added float:left; (instead of display:inline-block;) to avoid extra whitespace between thumbnails
  • May 30, 2011
    • Plugin is greatly upgraded by the addition of new features and updated to be conflict-proof with other js libraries and scripts by changing css class names, thumbnailScroller function calling, jquery.thumbnailScroller.js and by adding jQuery.noConflict();
      Added 2 more scrolling types (3 total): an additional scrolling via mouse movement and a new scrolling type via next/previous buttons. The 3 types of scroller are: “hoverPrecise”, “hoverAccelerate” and “clickButtons”
      Added auto-scrolling feature
  • Feb 23, 2011
    • Automatically setting content width for horizontal scrollers is no longer calculated via javascript. Instead of using jQuery .each() or for statements, the width is now set by adding an additional div (.horWrapper) that wraps content and by setting the display of .container div to inline, thus expanding its width automatically (check the updated css file for details)
  • Jan 1, 2011
    • Modified the plugin to scroll images with different widths horizontally
  • Nov 29, 2010
    • Created a plugin out of the original script for easy implementation, configuration and multiple scrollers on a single page
      Minor code fixes and enhancements
  • Nov 26, 2010
  • Oct 18, 2010
    • Brad Mace added some code to increase the left and right margins of the thumbnail scroller in order to be easier to get the first and last thumbnails all the way on the screen, without having to move the mouse to the very edge. Script updated :) thanks Brad!

License

You are free to use, study, improve and modify this script wherever and however you like.
Creative Commons License All works are licensed under GNU General Public License, GNU Lesser General Public License or Creative Commons Attribution 3.0 Unported License.


573 Comments

Post a comment

Comments pages: 1 2 3 4

  1. ebe
    Posted on April 4, 2014 at 21:13 Permalink

    Great plugin, easy to implement and great features, thanks for sharing it!

    Reply
  2. Arin G
    Posted on April 2, 2014 at 12:13 Permalink

    Hi,

    This plugin does not seems to work with jquery tabs

    https://jqueryui.com/tabs/

    I implemented 3 vertical scroller in 3 tabs, but only the first one seems to be working…others are not…

    If you have any idea please let me know your valuable thoughts.

    Thanks and Regards – Arin

    Reply
  3. JP
    Posted on March 21, 2014 at 15:52 Permalink

    This doesn’t seem to work with mobile. Do you have any suggestions? I can’t get it to work natively on smart phones and tablets.

    Reply
  4. tthomas
    Posted on February 28, 2014 at 19:39 Permalink

    Hello,

    This scroller is used with in a wordpress theme and we have discovered an issue.

    When you load the page:

    http://www.ceug2014.ca/

    The scoller loads fine, however, when you shift-f5 (shift refresh), the first image is displayed, and all other images are then added below vertically even though the code states to be horizontal.

    Do you have any fixes for this?

    Reply
  5. Dusan
    Posted on February 25, 2014 at 16:47 Permalink

    Hello,

    I’m using this plug-in to create a tabbed menu which scrolls left and right. The links of the tabs lead to different pages which all have this control. I’ve managed to make the appropriate tab “active” when I navigate to that page.
    The problem I’m having is that if the tab for this page is outside of the scroll area, when the page loads, the scroller is “not scrolled” to that position (the tab is correctly made active, but I can’t see it until I scroll)

    Is there any way I can make the scroller scroll to specific position when the page loads?

    Thanks in advance

    Reply
  6. dans
    Posted on February 24, 2014 at 02:40 Permalink

    Quisiera hacer un fullscreen, se puede hacer en este tema

    Reply
  7. W.Morgan
    Posted on February 17, 2014 at 17:47 Permalink

    Hi! such a great scroll! so cute too! I’m having trouble using lightbox in it though… it just doesn’t seem to work, any ideas why?

    It looks like this:

    <div id="tS2" class="jThumbnailScroller"> <div class="jTscrollerContainer"> <div class="jTscroller"> <a href="<?=base_url();?>img/proyectos/fashionZone1.jpg" data-lightbox="fashionZone"><img src="<?=base_url();?>img/proyectos/fashionZoneThumb1.jpg" /></a> <a href="<?=base_url();?>img/proyectos/fashionZone2.jpg" data-lightbox="fashionZone"><img src="<?=base_url();?>img/proyectos/fashionZoneThumb2.jpg" /></a> <a href="<?=base_url();?>img/proyectos/fashionZone3.jpg" data-lightbox="fashionZone"><img src="<?=base_url();?>img/proyectos/fashionZoneThumb3.jpg" /></a> <a href="<?=base_url();?>img/proyectos/fashionZone4.jpg" data-lightbox="fashionZone"><img src="<?=base_url();?>img/proyectos/fashionZoneThumb4.jpg" /></a> <a href="<?=base_url();?>img/proyectos/fashionZone5.jpg" data-lightbox="fashionZone"><img src="<?=base_url();?>img/proyectos/fashionZoneThumb5.jpg" /></a> <a href="<?=base_url();?>img/proyectos/fashionZone6.jpg" data-lightbox="fashionZone"><img src="<?=base_url();?>img/proyectos/fashionZoneThumb6.jpg" /></a> <a href="<?=base_url();?>img/proyectos/fashionZone7.jpg" data-lightbox="fashionZone"><img src="<?=base_url();?>img/proyectos/fashionZoneThumb7.jpg" /></a> </div> </div> <a href="#" class="jTscrollerPrevButton"></a> <a href="#" class="jTscrollerNextButton"></a> </div>

    thanks!
    A.

    Reply
  8. biog
    Posted on February 11, 2014 at 16:54 Permalink

    hey, nice script!
    i wonder if its possible to “jump” to a specified image inside the scroller?!

    in fact i have a gallery page with little thumbnails. when a user clicks on one of the thumbnails he comes to a detailed side with the thumbnailscroller on top and a bigger view of the selected image below.

    so i need to highlight/select the image that was clicked before…

    is it possible?
    if not, anybody here who knows a similar scroller with this feature?

    Reply
  9. Luis Arias
    Posted on January 12, 2014 at 10:01 Permalink

    In the jquery.thumbnailScroller.js file there is an error that makes that multiple scroller moves simultaneously, this lines solve the problem when the scrollers have prev/next buttons

    27 var $scrollerNextButton=$this.parent().find(“.jTscrollerNextButton”);
    28 var $scrollerPrevButton=$this.parent().find(“.jTscrollerPrevButton”);

    Reply
  10. Durvesh
    Posted on January 12, 2014 at 09:39 Permalink

    welll you saved my day…
    this is what exactly i was looking for..i just liked it..
    great work by you…
    thanks a lot for this..

    Reply
  11. Stephen
    Posted on January 8, 2014 at 13:08 Permalink

    I was wondering if there was a way to have the next and previous buttons to appear outside of the image scroller on the Type: clickButtons

    Reply
  12. Yuvaraj
    Posted on January 2, 2014 at 13:52 Permalink

    Great Post Nice Plugin you saved my day.

    Reply
  13. Natalie
    Posted on December 28, 2013 at 09:58 Permalink

    Hi there!
    Lovely scroller, thank you for developing it :)
    I am trying to use this in coordination with Fancybox, but they two are conflicting. Do you have any suggestions on which plugin works to get the images to pop up in an overlay gallery?
    Cheers!
    Natalie

    Reply
  14. tinkoo
    Posted on December 27, 2013 at 01:27 Permalink

    how can I define both hoverPrice and clickbutton. I would like to have both, is this possible?

    thanks

    Reply
  15. Rein
    Posted on December 19, 2013 at 05:19 Permalink

    Hey is this project on GITHUB? This plugin doesnt work correctly when you resize the container. Im using this plugin on a project of mine and i re wrote some of the code to fix it.

    Reply
    • Christoph
      Posted on January 24, 2014 at 15:41 Permalink

      Hey Rein,

      I have the same problem at the moment with the thumbnail scroller – after I resized the scroller to a size, when I should not work anymore the content jumps from left to right. Maybe your solution would give me a clue, can you get in touch with me?

      Thanks in advance :)
      Chris

      Reply
  16. Josh
    Posted on December 11, 2013 at 02:34 Permalink

    Your installation instructions are broken. Your script tag in particular. When I pasted in what you had told me to, it wouldn’t work. By copying your example it worked. Thanks, but please update your installation instructions.

    Reply
  17. veerapavankumar
    Posted on November 5, 2013 at 15:27 Permalink

    how to use for three tabs . i used but it is not working

    Reply
  18. gaurav
    Posted on October 31, 2013 at 07:23 Permalink

    how to show scroll as showed in example 3

    Reply
  19. Dash Rendar
    Posted on October 30, 2013 at 18:21 Permalink

    cool horizontal slider! love it… I’m pulling my hair out though trying to get some JS functionality. I want to add a simple image swap based on an onclick event. Any ideas? Even changing the visibility of the image onclick so it can “reveal” some content. (like flipping a playing card)

    I can get it working with a JS function but the hidden image revealed after the onclick event always pushes to the top left of the container DIV jtscroller. Maybe there is a simpler way? Anyone tried this??

    Reply
  20. poupak ahadi
    Posted on October 23, 2013 at 19:28 Permalink

    Thanks for the post . button click scroller just work in Firefox for me.
    Not working in IE and Chrome.
    Any suggesstions?!

    Reply
  21. Lazaro
    Posted on October 23, 2013 at 19:00 Permalink

    Hi, first of all I want to thank you for the slider, is almost perfect for what I was looking for.
    I just want to know if there’s any chance of including gif images format in the slider with the animations runing all the time.
    And also, when I hover and the autoscroll stop I want to know if it can back the autoscroll again.

    Thanks you again and wait your reply.

    Reply
  22. Ant
    Posted on September 12, 2013 at 16:10 Permalink

    Is there any way to make the inner scrolling area to scroll less, say 1 image at a time or 2 or 3 instead of the full viewable width?

    Reply
  23. Philip
    Posted on September 5, 2013 at 23:47 Permalink

    This is great , I would like to know how to retrieve which element/image is currently active either by name or id , is this possible?

    Reply
  24. Christian
    Posted on September 4, 2013 at 12:21 Permalink

    Hi!
    Great plugin! But I need to know one thing.. Is it possible to leave the first field of the slide always visible, also when I go down with the slide? Thank you very much!

    Reply
  25. Joelle
    Posted on August 28, 2013 at 12:31 Permalink

    Hey, i got this scroller to work but I need to know if there’s a way to stop it once i click on a div .. or disable it for a while then enable it back again
    thank you

    Reply
  26. eddie sal
    Posted on August 26, 2013 at 23:41 Permalink

    Hi, I like your work. Is there a limit to how many items can be in the scroller? thanks.

    Reply
  27. Dennis
    Posted on August 21, 2013 at 13:39 Permalink

    Hi Manos,

    first I wanna thank you for this plugin. That’s what I was searching for and it works (nearly) perfect.

    Unfortunately only ‘nearly’ because I found a little misbehavior of the plugin on Safari (Mac) when magnifying the page with cmd + (or even when making the page smaller with cmd -). In this state the plugin has an awkward behavior.

    Maybe you can fix this problem or at least have an idea how to fix it so I’ll do it maybe by myself.

    Thanks in advance,
    Dennis

    Reply
  28. David Pronge
    Posted on July 25, 2013 at 01:27 Permalink

    I was wondering if you ever got around to updating the scroller? You posted:

    Next version will have many features regarding dynamic elements, such as adding/removing images and scrollers on-the-fly. I’m planning on making this plugin extremely flexible with user defined option parameters for each feature, callback functions, scroll-to method, thumbnail titles & descriptions etc.

    I’m very interested in the callback functions. I’m currently using the scroller with a large number of images and each image links to its own webpage. If the visitor clicked on one of the last images, when they use the back button, they are sent back to the scroller page and have to scroll through the entire section to see the image they selected. It would be nice if they could go back to where they left off. If you fix this, I will donate to your site.

    Thank you,

    Dave

    Reply
  29. Renato
    Posted on June 21, 2013 at 13:29 Permalink

    Fantastic!!!!!

    Reply
  30. Juppy
    Posted on June 9, 2013 at 16:18 Permalink

    Hello!, honestly i can’t really understand the codes caused this is my first time in javascript but i think you’re codes can be understandable as i read there syntax and sequences. all i want to know is how it works.

    THANK YOU SO MUCH

    Self study time starts now (^_^)

    Reply

Comments pages: 1 2 3 4


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>

css.php