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

jQuery thumbnail scroller

jQuery thumbnail scroller

A thumbnail/image scroller that can be used as standalone or alongside lightboxes, gallery scripts etc. Features include: scrolling by cursor movement, buttons and/or touch, vertical and/or horizontal scrolling, customization via CSS and option parameters, methods for triggering events like scroll-to, update, destroy etc., user-defined callbacks functions and more.

Current version 2.0.3 (Changelog) – Version 1.x.x (no longer actively maintained)

How to use it

HTML

Get plugin files. Extract and upload jquery.mThumbnailScroller.min.js and jquery.mThumbnailScroller.css to your web server (more info)

jquery.mThumbnailScroller.min.js is the minified version of the plugin script (jquery.mThumbnailScroller.js) and jquery.mThumbnailScroller.css holds the styling of scroller(s). The archive also contains a number of HTML examples and demos inside examples directory.


Include jquery.mThumbnailScroller.css in the head tag your html document

<link rel="stylesheet" href="/path/to/jquery.mThumbnailScroller.css">

Include jQuery library (if your project doesn’t use it already) and jquery.mThumbnailScroller.min.js in your document’s head or body tag

Some frameworks and CMS include jQuery library in the head tag to make sure it’s loaded when other scripts request it. Usually, including .js files on the bottom of the HTML document (just before the closing body tag) is recommended for better performance. In any case, jQuery must be included first, before plugin scripts.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mThumbnailScroller.min.js"></script>

Create the markup with your images, links, etc. which is basically an element (e.g. a div) holding an unordered list (ul)

<div id="my-thumbs-list">
  <ul>
    <li><a href="image-1-link"><img src="/path/to/image-1-file" /></a></li>
    <li><a href="image-2-link"><img src="/path/to/image-2-file" /></a></li>
    <li><a href="image-3-link"><img src="/path/to/image-3-file" /></a></li>
    <li><a href="image-4-link"><img src="/path/to/image-4-file" /></a></li>
    <!-- and so on... -->
  </ul>
</div>

CSS

Give your element (in the example above #my-thumbs-list) a width and/or height value and a CSS overflow value of auto or hidden. For example:

#my-thumbs-list{
  overflow: auto;
  width: 800px;
  height: auto;
}

If you’re creating a vertical scroller, you’ll need to set a height (or max-height) value

#my-thumbs-list{
  overflow: auto;
  width: 300px;
  height: 500px;
}

Initialization

Initialize via javascript

Create a script and call mThumbnailScroller function on your element selector along with the option parameters you want

<script>
    (function($){
        $(window).load(function(){
            $("#my-thumbs-list").mThumbnailScroller({
              axis:"x" //change to "y" for vertical scroller
            });
        });
    })(jQuery);
</script>

more info

The code is wrapped in (function($){ ... })(jQuery);. This ensures no conflict between jQuery and other libraries using $ shortcut (see Avoiding Conflicts with Other Libraries for more info). The plugin function is called on $(window).load() so it executes after all images are loaded.

You can change the function selector "#my-thumbs-list" to any selector you want. For instance, if you want to create scrollers for all elements with class myClass, you simply do:

$(".myClass").mThumbnailScroller();

You may also have multiple selectors by inserting comma separated values

$(".myClass, #my-thumbs-list").mThumbnailScroller();

When you need multiple selectors with different options for each one, you can do:

$(".myClass").mThumbnailScroller({
    type:"hover-precise"
});
$("#my-thumbs-list").mThumbnailScroller({
    axis:"y",
    type:"click-70"
});

Initialize via HTML

If you prefer to initialize the plugin without a script, you can simply give your element the class mThumbnailScroller and optionally set its orientation via the HTML data attribute data-mts-axis ("x" for horizontal and "y" for vertical). For example:

<div id="my-thumbs-list" class="mThumbnailScroller" data-mts-axis="x">
  <ul>
    <!-- your content -->
  </ul>
</div>

See code examples on Github

Basic configuration & option parameters

The 2 basic options are axis which defines the scroller orientation and type which defines how the user interacts with the scroller.

axis

The default scroller orientation is horizontal, so if you don’t set an axis option value, it defaults to "x"

$("#my-thumbs-list").mThumbnailScroller({ axis:"x" });

To create a vertical scroller, set axis option to "y"

$("#my-thumbs-list").mThumbnailScroller({ axis:"y" });

or use data-mts-axis="y" if you’re initializing the plugin via HTML

type

You can set the type of scroller via javascript, for example:

$("#my-thumbs-list").mThumbnailScroller({ type:"hover-50" });

or using the HTML data attribute data-mts-type, e.g.:

<div class="mThumbnailScroller" data-mts-type="hover-50">...</div>

There are 4 basic scroller types:

  1. "hover-[number]" (e.g. "hover-33", "hover-80" etc.)

    Scrolling content in linear mode by hovering the cursor over the scroller edges. The edges are defined by the type name, where [number] indicates the percentage of the scroller area in which scrolling is idle. For example, setting "hover-50" (default value) on a 600 pixels wide horizontal scroller, means that scrolling will be triggered only when the cursor is over the first 150 pixels from the left or right edge. And when cursor is over the 50% of the scroller width (300 pixels), scrolling will be idle or stopped.

  2. hover-precise

    Scrolling content with animation easing (non-linear mode) by hovering the cursor over the scroller. The scrolling speed and direction is directly affected by the cursor movement and position within the scroller.

  3. "click-[number]" (e.g. "click-50", "click-90" etc.)

    Scrolling content by clicking buttons. The scrolling amount is defined by type name, where [number] indicates a percentage of the scroller area. For example, setting "click-50" on a 800 pixels wide horizontal scroller, means that each time you click the left or right arrow buttons, the content will scroll by 400 pixels (50% of 800px) to the left or right.

  4. click-thumb

    Scrolling each image/thumbnail at a time by clicking buttons.

"hover-[number]" and hover-precise types become disabled on touch-enabled devices and replaced by content touch-swipe scrolling.

Configuration

You can configure your scroller(s) using the following option parameters when calling mThumbnailScroller function
Usage $(selector).mThumbnailScroller({ option: value });

setWidth: false
Set the width of the scroller (overwrites CSS width), value in pixels (integer) or percentage (string).
setHeight: false
Set the height of the scroller (overwrites CSS height), value in pixels (integer) or percentage (string).
setTop: 0
Set the initial css top property of content, accepts string values (css top position).
Example: setTop: "-100px".
setLeft: 0
Set the initial css left property of content, accepts string values (css left position).
Example: setLeft: "-100px".
type: "string"
Scroller type defines the way users interact with the scroller.
Available values:

  • "hover-[number]" (e.g. "hover-50")
    Scrolling content in linear mode by hovering the cursor over the scroller edges. The edges are defined by the type name, where [number] indicates the percentage of the scroller area in which scrolling is idle. Scrolling accelerates proportionally according to cursor position: e.g. scrolling speed increases as the cursor moves towards the edges and decreases as it moves towards the center of the scroller area.
  • "hover-precise" Scrolling content with animation easing (non-linear mode) by hovering the cursor over the scroller. The scrolling speed and direction is directly affected by the cursor movement and position within the scroller.
  • click-[number] (e.g. "click-80")
    Scrolling content by clicking buttons. The scrolling amount is defined by type name, where [number] indicates a percentage of the scroller area.
  • "click-thumb" Scrolling each image/thumbnail at a time by clicking buttons. Each click will scroll the content by the width/height of the next non-visible adjusted image.
axis: "string"
Define scroller axis (scrolling orientation).
Available values: "y", "x", "yx".

speed: integer
Set the scrolling speed (higher=faster). Default value is 15.
contentTouchScroll: integer
Enable or disable content touch-swipe scrolling for touch-enabled devices.
To completely disable, set contentTouchScroll: false. Integer values define the axis-specific minimum amount required for scrolling momentum (default value is 25).
markup:{ thumbnailsContainer: "string" }
Set the element containing your thumbnails. By default, this is an unordered list (ul).
markup:{ thumbnailContainer: "string" }
Set the element containing each thumbnail. By default this is a list-item (li).
markup:{ thumbnailElement: "string" }
Set the actual thumbnail element. By default, this is an image tag (img).
markup:{ buttonsPlaceholder: "string" }
Set the placeholder element of the buttons.
markup:{
      buttonsHTML:{
          up:"string",
          down:"string",
          left:"string",
          right:"string"
      }
}
Set buttons HTML content. Default value is "SVG set 1". There are 5 ready-to-use SVG arrows set, that you can use with the values "SVG set 2", "SVG set 3" etc. If you want to use your own button icon, text etc., you can do for example:
buttonsHTML:{
      up:"&uarr;", //HTML up-arrow code
      down:"<img src='...' />", //a custom image
      left:">", //plain text
      right:"&rarr;" //HTML right-arrow code
}
SVG arrows will fallback to HTML codes on IE8.
advanced:{ autoExpandHorizontalScroll: boolean }
Auto-expand content horizontally (for "x" or "yx" axis).
If set to true (default), content will expand horizontally to accomodate any floated/inline-block elements (such as li, a, img etc.).
advanced:{ updateOnContentResize: boolean }
Update scroller(s) automatically on content, element or viewport resize. The value should be true (default) for fluid layouts/elements, adding/removing content dynamically, hiding/showing elements etc.
advanced:{ updateOnImageLoad: boolean }
Update scroller(s) automatically each time an image inside the element is fully loaded. The value is true by default.
advanced:{ updateOnSelectorChange: "string" }
Update scroller(s) automatically when the amount and size of specific selectors changes.
Useful when you need to update the scroller(s) automatically, each time a type of element is added, removed or changes its size.
For example, setting updateOnSelectorChange: "ul li" will update the scroller each time list-items inside the element are changed. Setting the value to true, will update the scroller each time any element is changed. To disable (default) set to false.
theme: "string"
Set a ready-to-use scroller theme (plugin’s CSS contains all themes).
callbacks:{
      onInit: function(){}
}
A function/custom code to execute when the scroller has initialized (callbacks demo).
Example:
callbacks:{
    onInit:function(){
      console.log("scroller initialized");
    }
}
callbacks:{
      onScrollStart: function(){}
}
A function/custom code to execute when scrolling starts (callbacks demo).
Example:
callbacks:{
    onScrollStart:function(){
      console.log("scroll started");
    }
}
callbacks:{
      onScroll: function(){}
}
A function/custom code to execute when scrolling is completed (callbacks demo).
Example:
callbacks:{
    onScroll:function(){
      console.log("scroll completed");
    }
}
callbacks:{
      onTotalScroll: function(){}
}
A function/custom code to execute when scrolling is completed and content is scrolled all the way to the end (bottom and/or right) (callbacks demo).
Example:
callbacks:{
    onTotalScroll:function(){
      console.log("Scrolled to 100%");
    }
}
callbacks:{
      onTotalScrollBack: function(){}
}
A function/custom code to execute when scrolling is completed and content is scrolled back to the beginning (top and/or left) (callbacks demo).
Example:
callbacks:{
    onTotalScrollBack:function(){
      console.log("Scrolled back to 0%");
    }
}
callbacks:{
      onTotalScrollOffset: integer
}
Set an offset for the onTotalScroll callback option.
For example, setting onTotalScrollOffset: 100 will trigger the onTotalScroll callback 100 pixels before the end of scrolling is reached.
callbacks:{
      onTotalScrollBackOffset: integer
}
Set an offset for the onTotalScrollBack callback option.
For example, setting onTotalScrollBackOffset: 100 will trigger the onTotalScrollBack callback 100 pixels before the beginning of scrolling is reached.
callbacks:{
      whileScrolling: function(){}
}
A function/custom code to execute while scrolling is active (callbacks demo).
Example:
callbacks:{
    whileScrolling:function(){
      console.log("scrolling...");
    }
}
callbacks:{
      alwaysTriggerOffsets: boolean
}
Control the way onTotalScroll and onTotalScrollBack offsets execute.
By default, callback offsets will trigger repeatedly while content is scrolling within the offsets.
Set alwaysTriggerOffsets: false when you need to trigger onTotalScroll and onTotalScrollBack callbacks only once.
live: boolean, "string"
Enable or disable the creation of scroller(s) on all elements matching the current selector, now and in the future.
Set live: true when you need to add scroller(s) on elements that do not yet exist in the page. These could be elements added by other scripts or plugins after some action by the user.
If you need at any time to disable or enable the live option, set live: "off" and "on" respectively.
You can also tell the script to disable live option after the first invocation by setting live: "once".
liveSelector: "string"
Set the matching set of elements to apply a scroller, now and in the future.

Plugin methods

Methods are ways to execute various scroller actions programmatically from within your script(s).

update

Usage $(selector).mThumbnailScroller("update");

Call the update method to manually update existing scrollers to accomodate new content or resized element(s). This method is by default called automatically by the script (via updateOnContentResize option) when the element itself and/or its content size changes.

scrollTo

Usage $(selector).mThumbnailScroller("scrollTo", position, {options});

Call the scrollTo method to scroll content to the position parameter. Position parameter can be a string (e.g. "#element-id", "bottom", "left" etc.), an integer indicating number of pixels (e.g. 100), an array for y/x axis (e.g. [100,100]), a js/jQuery object, a function etc. method demo

view examples

Scroll to right (end)

$(selector).mThumbnailScroller("scrollTo", "right");

Scroll to the last element within your content

$(selector).mThumbnailScroller("scrollTo", "last");

Scroll to element with id myID

var to="#myID";
$(selector).mThumbnailScroller("scrollTo", to);

Scroll by 200 pixels

$(selector).mThumbnailScroller("scrollTo", "-=200"); //scroll forward
$(selector).mThumbnailScroller("scrollTo", "+=200"); //scroll backward

scrollTo position parameter

Position parameter can be:

  • "string"
    • Element selector
      For example, scroll to element with id “element-id”:
      $(selector).mThumbnailScroller("scrollTo","#element-id");
    • Special pre-defined position
      For example, scroll to right:
      $(selector).mThumbnailScroller("scrollTo","right");

      Pre-defined position strings:

      • "bottom" – scroll to bottom
      • "top" – scroll to top
      • "right" – scroll to right
      • "left" – scroll to left
      • "first" – scroll to the position of the first element within content
      • "last" – scroll to the position of the last element within content

    • Number of pixels less/more: (e.g. "-=100"/"+=100")
      For example, scroll by 100 pixels right:
      $(selector).mThumbnailScroller("scrollTo","-=100");
  • integer
    • Number of pixels (from left and/or top)
      For example, scroll to 100 pixels:
      $(selector).mThumbnailScroller("scrollTo",100);
  • [array]
    • Different y/x position
      For example, scroll to 100 pixels from top and 50 pixels from left:
      $(selector).mThumbnailScroller("scrollTo",[100,50]);
  • object/function
    • jQuery object
      For example, scroll to element with id “element-id”:
      $(selector).mThumbnailScroller("scrollTo",$("#element-id"));
    • js object
      For example, scroll to element with id “element-id”:
      $(selector).mThumbnailScroller("scrollTo",document.getelementbyid("element-id"));
    • function
      For example, scroll to 100 pixels:
      $(selector).mThumbnailScroller("scrollTo",function(){ return 100 });

scrollTo method options

speed: integer
Scrolling speed.
Example:
$(selector).mThumbnailScroller("scrollTo", "-=200", {
  speed: 30
});
duration: integer
Scrolling animation duration, value in milliseconds.
Example:
$(selector).mThumbnailScroller("scrollTo", "right", {
  duration: 1000
});
easing: "string"
Scrolling animation easing, values:

  • "easeInOut"
  • "easeOut"
  • "easeInOutSmooth"
  • "easeOutSmooth"
  • "easeInOutStrong"
  • "easeOutStrong"
  • "easeInOut"
  • "easeInOut"

Example:

$(selector).mThumbnailScroller("scrollTo", 300, {
  easing: "easeOutSmooth"
});
callbacks: boolean
Trigger user defined callbacks after scroll-to event is completed, values: true, false.
Example:
$(selector).mThumbnailScroller("scrollTo", "top", {
  callbacks: false
});
timeout: integer
Method timeout (delay). The default timeout is 60 (milliseconds) in order to work with automatic scroller update functionality, value in milliseconds.
Example:
$(selector).mThumbnailScroller("scrollTo", "last", {
  timeout: 0 //no timeout
});

stop

Usage $(selector).mThumbnailScroller("stop");

Stops running scrolling animations. Usefull when you wish to interrupt a previously scrollTo call.

disable

Usage $(selector).mThumbnailScroller("disable");

Calling disable method will temporarily disable the scroller(s). Disabled scrollers can be re-enabled by calling the update method.

To disable a scroller and reset its content position, call the method by setting its reset parameter to true:

$(selector).mThumbnailScroller("disable", true);

method demo

destroy

Usage $(selector).mThumbnailScroller("destroy");

Calling destroy method will completely remove the scroller and return the element to its original state.

method demo

Scroller styling & themes

You can style your scroller(s) using jquery.mThumbnailScroller.css which contains the basic/default styling and few ready-to-use themes.

You can modify the default styling or an existing scroller theme directly, clone a theme and change it to your needs or overwrite the CSS in another stylesheet. If you wish to maintain compatibility with future plugin versions (that may include an updated version of jquery.mThumbnailScroller.css), I recommend using your own custom (or cloned) theme (creating your own custom theme), or overwriting the CSS. This way you can always upgrade jquery.mThumbnailScroller.css without having to redo your changes.

Themes

Plugin’s CSS includes a number of ready-to-use themes for quickly applying a basic styling to your scroller(s). To apply a theme, use theme option parameter:

$(selector).mThumbnailScroller({
    theme: "theme-name"
});

or the HTML data attribute data-mts-theme in your markup:

<div class="mThumbnailScroller" data-mts-theme="theme-name">...</div>

themes list

“buttons-in”

A theme to use in conjunction with any scroller type using buttons. Uses a specific SVG set of custom styled buttons placed inside the scrolling area (see the theme in the demo). Example:

$(selector).mThumbnailScroller({
    type:"click-50",
    theme:"buttons-in"
});

“buttons-out”

A theme to use in conjunction with any scroller type using buttons. Uses a specific SVG set of custom styled buttons placed outside of the scrolling area (see the theme in the demo). The buttons in this theme are appended directly inside your element, meaning that the element must have a non-static CSS position (the plugin script changes this automatically) and a left/right (or top/bottom) padding in order for the buttons to display as intended. Example:

#my-thumbs-list{
  position: relative;
  padding: 0 55px;
}
$("#my-thumbs-list").mThumbnailScroller({
    type:"click-thumb",
    theme:"buttons-out"
});

“hover-full”

A theme which uses hover-precise scroller type (overwrites type option). It applies a left/right (or top/bottom) margin on the first and last images for better usability (see the theme in this example). Example:

$(selector).mThumbnailScroller({
    theme:"hover-full"
});

“hover-classic”

A theme which uses hover-85 scroller type (overwrites type option) and specific scrolling speed (see the theme in the demo). Example:

$(selector).mThumbnailScroller({
    theme:"hover-classic"
});

creating your own custom theme

Create a name for your theme, e.g. “my-theme” and set it as the value of the theme option

$(selector).mThumbnailScroller({
    theme:"my-theme"
});

Your element will get the class “mTS-my-theme” (your theme-name with the prefix “mTS”), so you can create your CSS using the .mTS-my-theme in your rules. For instance:

.mTS-my-theme{ padding: 10px; }
.mTS-my-theme .mTSThumbContainer{ margin: 0 5px; } 
/* and so on... */

User-defined callbacks

You can trigger your own js function(s) by using plugin’s callbacks option parameter (see all availbale callbacks in configuration section). Some examples:

$(selector).mThumbnailScroller({
    callbacks:{
        onScroll: function(){ /* do something */ }
    }
});
$(selector).mThumbnailScroller({
    callbacks:{
        onTotalScroll: function(){ myFunction(); }
    }
});

function myFunction(){
   /* do something */
}

The plugin returns a number of values and objects that can be used inside the callbacks

  • this – the scroller element
  • this.mts.content – the scrollable element containing the content (e.g. the ul element) as jquery object
  • this.mts.top – content’s top position (pixels)
  • this.mts.left – content’s left position (pixels)
  • this.mts.topPct – content vertical scrolling percentage
  • this.mts.leftPct – content horizontal scrolling percentage
  • this.mts.direction – content’s scrolling direction (returns "x" or "y")

view code examples

Get the scrolling percentage of a horizontal scroller while scrolling is active

$(selector).mThumbnailScroller({
    callbacks:{
        whileScrolling: function(){
          var result=this.mts.leftPct;
          console.log(result+"%");
        }
    }
});

Append new content when scrolling reaches scroller’s right edge

$(selector).mThumbnailScroller({
    callbacks:{
        onTotalScroll: function(){
          appendData(this.mts.content);
        }
    }
});

function appendData(el){
   el.append("<li>new data</li>");
}

Plugin dependencies & requirements

  • jQuery version 1.6.0 or higher

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
http://opensource.org/licenses/MIT

Pages: 1 2 3


751 Comments

Post a comment

Comments pages: 1 2 3 4 5 14

  1. Alex
    Posted on August 2, 2011 at 02:11 Permalink

    Hi there Malihu,
    I am using this incredible plugin, which is AWESOME!
    But I have a little problem, I want to use multiple thumbnail scrollers on my website and the first one works great, but the others just display the first 4 images and it can’t be scrolled! I have checked the code and its perfect, I even copied the javascript source for each scroller and it doesn’t works!
    I would appreciate your help and congratulate you for this great plugin!

    Reply
  2. Tony
    Posted on July 28, 2011 at 19:08 Permalink

    So cool . Thanks .

    Reply
  3. skywlkr
    Posted on July 28, 2011 at 03:48 Permalink

    Hey there!

    I have tried out this scroller on my site and having the same issues as some others here. Sometimes the scroller (horizontal) only loads a few images instead of the much more I have in the code. I have managed to figure out that in these problematical cases the width of jTscrollerContainer is not set correctly. I would be grateful if you would share your ideas why this happens.

    Thanks in advance.

    Reply
  4. bhargavavardhan
    Posted on July 26, 2011 at 23:36 Permalink

    I’m noticing a “jitter” at the far right using Firefox and IE (Safari seems ok). I see your demo here also does it so I’m wondering if there’s a known fix for this?

    What happens is when the thumbnails get all the way to the right, instead of stopping on the last thumb it jitters back and forth. Any help would be GREATLY appreciated!

    Reply
  5. bhargavavardhan
    Posted on July 26, 2011 at 23:32 Permalink

    Thank you so much for such a great script. I have a question – is it possible to be able to scroll to the end (the right) and then it loops back around to the beginning?

    Reply
  6. Stephen
    Posted on July 25, 2011 at 23:44 Permalink

    I’m noticing a “jitter” at the far right using Firefox and IE (Safari seems ok). I see your demo here also does it so I’m wondering if there’s a known fix for this?

    What happens is when the thumbnails get all the way to the right, instead of stopping on the last thumb it jitters back and forth. Any help would be GREATLY appreciated!

    Reply
    • malihu
      Posted on July 27, 2011 at 00:21 Permalink

      Does this happen on “hoverAccelerate” mode? That jitter happens once or?

      Reply
  7. Darry Young
    Posted on July 25, 2011 at 12:05 Permalink

    Hey there,

    Thank you so much for such a great script. I have a question – is it possible to be able to scroll to the end (the right) and then it loops back around to the beginning?

    Kind Regards

    Reply
    • malihu
      Posted on July 25, 2011 at 21:51 Permalink

      Hello,
      Nope. This particular plugin cannot behave as carousel with those types of scrolling, as it interacts mostly with the cursor position over it.

      Reply
  8. Dominik
    Posted on July 24, 2011 at 05:15 Permalink

    Hi, that scroller is great, but I have problems with it under Opera 11.50 .
    http://unifire.biuro.evillage.pl/node/3 – do You have any ideas, what to do about this problem? Navigation scrolls just link to top of the page and are always displayed. And, what’s bigger problem – it’s not scrolling.

    Reply
  9. Simon
    Posted on July 19, 2011 at 15:33 Permalink

    Hi guys, I have had my site up for a while and i’m noticing an intermittent problem with the script, check out http://www.sodesigns.co.uk, it may happen it may not, but basically, when I scroll to the left all the images scroll too far off the page.

    It’s as if the Stop function is not working properly. I had a developer do this for me initially, and have no clue on how to fix this, but i’m hoping it won’t be that hard and it’s something i can do myself.

    Help!!!

    Reply
  10. bakman
    Posted on July 15, 2011 at 14:04 Permalink

    This scroller is working better than I expected.

    I have included more than 15 thumbnail scollers on my website (integrated into wordpress) and its performance is flawless crossbrowser. I have to added some if else statements to set the “click buttons” in case of mobile devices. But other than that: thank you very much for creating and supporting this plugin.
    Suggestion: set the height() and width: auto; for the images in jquery based on a thumb size, else IE7 will render it incorrectly.

    Take a look: richardbakker.com

    Reply
    • Vajaah
      Posted on April 17, 2012 at 17:45 Permalink

      This scroller is really smooth!

      I am having trouble getting IE7 to render properly. The scroller doesn’t start flush left to the container and then doesn’t scroll all the way to the right, so there are thumbnails that aren’t seen. I see the above suggestion, “set the height() and width: auto; for the images in jquery” but am not sure where to implement it.

      Reply
  11. Kas
    Posted on July 14, 2011 at 16:40 Permalink

    Having a bit of trouble loading the plugin… I’m trying to integrate it with a Nivo Slider with thumbnails generated by WordPress via timthumb… everything looks fine from what I can tell but it just doesn’t seem to be working at all. There are a few extra classes in there but the structure of the html side of things looks fine but the script doesn’t appear to be working at all. Anybody had any luck getting anything like what I’m trying to do to work?

    http://www.jolieanddeen.com.au/collections/spring2011 <— here's the page I'm working on… there are 20 thumbnails there, 4 of which are hidden…

    If anyone could have a look at let me know if they can see anything obviously wrong I would be eternally thankful. I've just about thrown my computer at the wall trying to work this one out myself!

    Reply
  12. JohnSmith
    Posted on July 14, 2011 at 09:51 Permalink

    hi malihu,if I put only one image in div,the div’s width is more than that image’s width ,and if I move mouse over div,the image followed mouse pos,I hope if all images’ width less than div width,they don’t move under mouse cursor.

    Reply
  13. Nick
    Posted on July 13, 2011 at 17:16 Permalink

    I’m trying to reformat my photography site which is currently in Flash into an HTML 5 version. I’m trying to implement your thumb scroller but not having any luck despite almost copying and pasting the code and examples from above.

    The problem is, although the bar with the thumbnails appears, the next previous buttons don’t (they do exist and are correctly referenced). Even if I chose one of the hover methods the thumbnails don’t move.

    Any ideas?

    You can see the page with the scroller here:
    http://importedlight.com/v3/show.php?a=17

    Reply
    • Nick
      Posted on July 13, 2011 at 18:32 Permalink

      Suspect my previous problem might have been something to do with the CSS as its “sort of” working now.

      Reply
      • Nick
        Posted on July 13, 2011 at 18:51 Permalink

        Ok – new problem!

        The very last image in my thumbnails seems to insist on wrapping onto the next line. This means if you use the Prev/Next buttons it looks okay but you never see the last image as its hidden below. If you use the hover-scroll options then the whole row scrolls up if you move the mouse down and you can see the final wrapped image right at the left.

        Example – Next/Prev buttons
        http://importedlight.com/v3/show.php?a=15

        Example – Hover Scroll
        http://importedlight.com/v3/show2.php?a=15

        Reply
  14. Resim Blog
    Posted on July 10, 2011 at 14:04 Permalink

    Thanks you, i am using now my web site. Programing a new time. Simple and wonderful scroller! Thanks you..

    Reply
  15. o_nu
    Posted on July 8, 2011 at 00:22 Permalink

    This is a GREAT tool! Thank you!! I have a really quick question as I’m having trouble integrating the horizontal scroller in my map buble views. You can see an example at:

    http://www-olga.classicizingchicago.northwestern.edu/search/localsolr/chicago

    Click on the Art Institute of Chicago pin to see what I’m trying to do.

    As this is a Drupal site I had to make some changes to the method (i.e. replace $ with jQuery) and also modify the call to it as well:

    jQuery.noConflict();
    jQuery(document).ready(function(){
    jQuery(“#tS2”).thumbnailScroller({ //OLD WAY: $(“#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
    });
    });

    The issue I am running into is that the scroller works only if I have an alert on the page before the load of the bubbles. I tried placing the above call at the very bottom of my html (right before the closing tag) but that wouldn’t work.

    Any help would be greatly appreciated! Either way, great sleek design and awesome work on the thumbnail scroller!

    Reply
    • malihu
      Posted on July 8, 2011 at 21:50 Permalink

      Hi,
      Instead on document ready, try to call thumbnail scroller function on window load. Change:
      jQuery(document).ready(function(){ ...

      to:
      jQuery(window).load(function(){

      Reply
      • o_nu
        Posted on July 8, 2011 at 23:11 Permalink

        hanks a bunch malihu! I tried that (right before the end of and also within the map bubble code to see if either would work, but unfortunately I get the same results.

        Here is the URL :
        http://www.classicizingchicago.northwestern.edu/search/localsolr/chicago

        I think it may have to do with the load of the bubble itself. If you have any other recommendations, please let me know. I’ll dig more.

        Reply
    • Erfan Ilyas
      Posted on January 15, 2012 at 16:12 Permalink

      Any body having the issue with google crome that if your scroll works some times and sometimes not.
      try using the malihu suggestion.

      Instead on document ready, try to call thumbnail scroller function on window load. Change:

      jQuery(document).ready(function(){ …

      to:

      jQuery(window).load(function(){

      Reply
  16. bakman
    Posted on July 6, 2011 at 16:41 Permalink

    I am trying to implement multiple scrollers on 1 page. Some scollers contain 4 images and others contain 20. Strange things happen when there are only 4 images in the scroller (I am using 100% width). Does the scroller check if the totalwidth of all thumbs is smaller then the width of the window ? if yes, it should not perform any scolling, if no, start scroll.
    Now it will starts following my mouse in reverse when there are not too many thumbs.

    Reply
    • bakman
      Posted on July 6, 2011 at 17:03 Permalink

      My mistake, this was due to the height to which it validated true.

      Reply
  17. Kit
    Posted on July 5, 2011 at 09:49 Permalink

    I want to add some text under each image, how can I do that?

    thanks.

    Reply
  18. Kit
    Posted on July 5, 2011 at 08:48 Permalink

    $(‘#tS1’).bind(‘click’,function(){
    $this.remove();
    $(‘#tS1’).hide();
    });

    I put this inside the function, I want to make it once I click a items on the horizontal bar, then the whole bar will hide and the other under the bar will show up, how to make it? thanks.

    Reply
    • Kit
      Posted on July 5, 2011 at 09:47 Permalink

      please ignore this…i have solved this already. thanks.

      Reply
  19. Tobias
    Posted on July 4, 2011 at 15:59 Permalink

    Hi,
    1st
    I use the script to link between pages, and when the page has loaded it scrolls back to the first thumbnail. Can I somehow tell the script to go to the currently selected thumbnail?
    I have a class to change the background of the thumbnail (they are transparent PNGs), do you think I could use that class?

    2nd
    Is it possible to move the arrows outside the scroll area to keep them from blocking the thumbnails underneath?

    Reply
  20. Anthony Grieveson
    Posted on June 26, 2011 at 02:56 Permalink

    Great script! Thanks.

    Just a quick question: would there be a way to modify the script so that when “scrollerType” is set to “clickButtons” it scrolls a single image width, rather than the view width?

    Reply
  21. Bruno
    Posted on June 20, 2011 at 18:21 Permalink

    Hi Malihu,

    Fantastic plugin!! Thanks.

    Im trying to do a simple change, but getting some dificulties. I want to show the arrow not on top of the thumbs, i want them to on the Right and Left of the Thumbs. I tried to change the Right and Left css properties to negative but has the div has the overflow propertie set to hidden, just dissapears. Any idea how this can be done?

    Once again, thanks for the great work!!

    Best regars
    Bruno Fernandes

    Reply
  22. Daniel B.
    Posted on June 19, 2011 at 12:18 Permalink

    Hi Malihu,
    Great job !
    A question/issue with autoscrolling: I’d like the slideshow to start and scroll automatically if people does not click on the arrow.
    I set
    autoScrolling:5,
    autoScrollingSpeed:2000,
    autoScrollingEasing:”easeInOutQuad”,
    autoScrollingDelay:10

    Is it an issue on Firefox ???

    Thanks

    Reply
    • malihu
      Posted on June 21, 2011 at 11:11 Permalink

      It should work and it works well on Firefox 4 without any issues. What’s your version?

      Reply
  23. Pierre
    Posted on June 18, 2011 at 17:21 Permalink

    Hello malihu,

    Indeed, thanks for a very smooth scroller. I am trying to make a gallery for my mother, and am having the about same situation as Vikki Neal above ( http://manos.malihu.gr/jquery-thumbnail-scroller#comment-5075 ). I want to be able to click a thumbnail and have a larger image open in an empty DIV to the right of the scroller.

    You gave her some code and I tried applying that inside the script in the HTML where I thought it would go, but since I am new to jquery/javascript (this gallery for my mother is my first project) I probably didn’t put it where it belongs. (I did nest the thumbnails inside a , create the empty div with the proper #, but that did not help.)

    Do you think that you could give me some indications of how to integrate the code you gave her into your latest version of the scroller?

    I would be very greatful!

    Thanks,
    /Pierre.

    Reply
    • malihu
      Posted on June 19, 2011 at 04:01 Permalink

      Hi,

      The code I posted on the previous comment is for a slightly older version of the plugin and was based on Vikki’s markup. Basically, if you’ve used the latest version, you should add something like this inside (or not) jquery.thumbnailScroller.js:

      $(".jTscroller a").click(function(event) { event.preventDefault(); var $this=$(this); var image = $this.attr("href"); $("#your_image_placeholder_id img").attr("src",image); });

      Change the “your_image_placeholder_id” with your element id and place inside it an empty img tag (e.g. <img src=”” />). Of course you need to have the image url you wanna load inside each thumbnail anchor href attribute.

      This is the absolute minimum code to load new images without any preloaders, selected thumbnail indicators etc.

      Hope I helped 🙂

      Reply
      • Pierre
        Posted on June 19, 2011 at 12:09 Permalink

        Thanks a lot Manos, and for your quick reply as well.
        I had to move around the script-snippet a few times in order to get it in the right place inside the .js, but now it works and I just have to play with the CSS to position everything. Then it will be a jQuery tutorial-project for me to try to add preloader and thumbnail indicators on my own.
        Have a nice day!

        Reply
  24. Daffy
    Posted on June 14, 2011 at 08:50 Permalink

    hi malihu,
    please open http://www.chrisbunjamin.com/commercial.php with mozilla firefox and see one of thumnail images become whiter than the other (the real image is not whiter like that). how to fix it? but theres no problem in internet explorer

    thank you

    Reply
    • Daffy
      Posted on June 14, 2011 at 09:47 Permalink

      the image i mean is the second thumbnail in http://www.chrisbunjamin.com/commercial.php where the photo have wallpaper “LOW”. it become whiter in mozilla firefox. is there anything i can do with css or what do u suggest for this?

      thanks a lot

      Reply
  25. Kris
    Posted on June 11, 2011 at 00:30 Permalink

    Hi there,
    Thank you for sharing your work with all of us! Its really good!
    I want to ask something about this script.. And the question is:
    Is there a way to start the scrolling queue from a particular image? For example I want the first image on the left to be the 4th image in the list:

    //visible



    //visible
    //hiden


    //hiden


    Thanks! : )
    Kris

    Reply
    • Kris
      Posted on June 11, 2011 at 00:35 Permalink

      ughh : ) sorry for the empty spaces.. it was some html example : )

      the ide is:

      a> img1 img 2 img3 img 4 img 5 img 6 img 7 img 8 img 9</a

      Reply
      • malihu
        Posted on June 11, 2011 at 13:20 Permalink

        Hi Kris,
        You can alter the left or top values of .container div in jquery.thumbnailScroller.css. A negative value (e.g. left:-300px) would initially set the scroller to start with the thumbnail at 300 pixels.

        Reply
      • Kris
        Posted on June 11, 2011 at 17:56 Permalink

        That is OK, but if I want it to start from a particular image then what? And if I have images with a different width? : ) The question is – is there an easy way to tell the script to start from an element. I want to use your script in an image gallery which will load all the images from a db. When you click on a thumbnail the page will reload showing a big view of this thumb and the rest of thumbnails starting with the shown image..

        If the image I speak about is number 4 in the sequence then the scroll should start with it, and if you want to see the previous images you should scroll left then.

        Did you get me now?

        Reply
      • malihu
        Posted on June 12, 2011 at 13:39 Permalink

        I see. There’s not an “easy way” of accomplishing this. Not without adding some extra function(s) to the script, because you would need to find the index number of the starting image, calculate its left position and set its negative value as the css left property of the scroller with js.

        Reply
  26. Vikki Neal
    Posted on June 8, 2011 at 14:36 Permalink

    *Sorry, replied to someone else’s post rather than posting a new comment*

    Hi there, thanks for the plugin.

    I’ve slightly amended it so that when a thumbnail is clicked, it loads the linked image into an empty div on the page. Now I’m amazed to have been able to acheive that as I’m a rookie.

    One thing that you might be able to help with however, I want to be able to highlight the clicked thumbnail and then remove that highlight and add it to the next once clicked.

    My code is here – but it doesn’t seem to work 🙁

    Any ideas?

    var $j = jQuery.noConflict(); $j(document).ready(function(){ $j("ul#thumbnailImages li a").click(function(event) { event.preventDefault(); var image = $j(this).attr('href'); $j("#largeImage img").attr('src',image); }); }); $(function(){ $('ul#thumbnailImages li a').click(function(){ $('ul#thumbnailImages li a').removeClass("activeThumbnail"); $(this).addClass("activeThumbnail"); }); });

    Reply
    • malihu
      Posted on June 8, 2011 at 15:57 Permalink

      Hello,

      Just by looking at it, you should probably write a single function like this:

      $j("ul#thumbnailImages li a").click(function(event) { event.preventDefault(); var image = $j(this).attr('href'); $j("#largeImage img").attr('src',image); $j('ul#thumbnailImages li a').removeClass("activeThumbnail"); $j(this).addClass("activeThumbnail"); });

      Reply
      • Vikki Neal
        Posted on June 8, 2011 at 17:12 Permalink

        Hi thanks for the reply – i’ve sort of scraped together a similar conclusion – although your version is neater. Thanks!

        Reply
  27. Saeid A.K
    Posted on June 8, 2011 at 13:13 Permalink

    hey dude, thanks for sharing this…

    but I have to use more than one horizontal scroller in a page, when I use 3-4 same scroller in a page just one of them works correctly.

    how can I fix this problem ? is a bug between keyboard and my chair (!!) or bug is because of your codes 😀 ?!!?

    Reply
    • Saeid A.K
      Posted on June 8, 2011 at 13:49 Permalink

      hi again !

      dear master! I found the problem !!! the bug was between the keyboard and chair !! it dose fix just bye and operation in selector part !! like that $(“#tS2 , #tS6 , #tS8”) !!

      thanks a alot

      Reply
  28. Neil Joseph
    Posted on June 6, 2011 at 12:28 Permalink

    Wow! I’ve been looking for this! Thank you so much for this plugin.

    I integrated it to my small blog powered by ModX CMSNeilYamit.com. And with a little CSS tweak, I was able to add a caption on the image.

    Great stuff.

    Reply
    • Vikki Neal
      Posted on June 8, 2011 at 14:35 Permalink

      Hi there, thanks for the plugin.

      I’ve slightly amended it so that when a thumbnail is clicked, it loads the linked image into an empty div on the page. Now I’m amazed to have been able to acheive that as I’m a rookie.

      One thing that you might be able to help with however, I want to be able to highlight the clicked thumbnail and then remove that highlight and add it to the next once clicked.

      My code is here – but it doesn’t seem to work 🙁

      Any ideas?

      var $j = jQuery.noConflict(); $j(document).ready(function(){ $j("ul#thumbnailImages li a").click(function(event) { event.preventDefault(); var image = $j(this).attr('href'); $j("#largeImage img").attr('src',image); }); }); $(function(){ $('ul#thumbnailImages li a').click(function(){ $('ul#thumbnailImages li a').removeClass("activeThumbnail"); $(this).addClass("activeThumbnail"); }); });

      Reply
    • Kris Hunt
      Posted on October 22, 2011 at 08:12 Permalink

      I want to use this with short, one-word captions underneath the thumbnail. Can you save me some time and tell me which CSS element(s) need to be modified?

      Reply
  29. Adamo
    Posted on June 5, 2011 at 21:02 Permalink

    Hey. This is a very good work man!

    But can I have a question? 🙂

    Is this possible to scroll while not all of the thumbnails are loaded?

    Reply
    • malihu
      Posted on June 6, 2011 at 03:10 Permalink

      Yes but you’d have to set a width/height value for the thumbnails (as html attributes or css properties) in order for the script to calculate scroller width or height correctly.

      Reply
  30. oscar
    Posted on May 31, 2011 at 10:16 Permalink

    the script is sooo nice. i have a problem.. i need it to keep scrolling even after user has passed the mouse over.
    any comment?

    Reply
    • Vlad
      Posted on May 31, 2011 at 10:28 Permalink

      Oscar, this seems like a retarded suggestion, but have you tried turning the auto scroll off?

      Malihu, there are a few small bugs in IE one I mentioned above but not in detail:
      1. Thumbnail scroller jumps up and down with the cursor, can be fixed by setting top:0!important… but kinda ghetto way of doing it

      also Ie doesnt deal well with opacity so ie 7
      *:first-child+html ul li{filter:alpha(opacity=65);}

      😛

      Reply
      • malihu
        Posted on May 31, 2011 at 12:02 Permalink

        Awesome Vlad!
        Thanks for taking the time to test and post the css for ie7 🙂

        PS. Funny how ie7 needs !important for top:0… go figure 😛

        Reply
      • vlad
        Posted on May 31, 2011 at 18:23 Permalink

        IE 7 should have been retired along with IE 6 a long time ago. I think we are up to 9 now?

        But oh well. Another good trick if you wanna get your IE’s all in one shot is
        <!--[if IE]>-->
        For those who want to make it more specific, http://www.webdevout.net/css-hacks has great hacks.

        Thanks again for making the auto scroller, and the redesign is really good. I like the custom font, I didn’t know google made those, I generally used font squirrel to custom make mine.

        Reply
      • vlad
        Posted on May 31, 2011 at 18:26 Permalink

        LOL it blocked my trick! hahaha
        it was
        (!–[if IE])
        (link rel=”stylesheet” href=”http://moragodpublishing.com/files/ie.css” type=”text/css”)
        (![endif]–)

        but with the “” instead of “(” “)”

        Reply

Comments pages: 1 2 3 4 5 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