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.
https://opensource.org/licenses/MIT

Pages: 1 2 3


752 Comments

Post a comment

Comments pages: 1 3 4 5 6 7 14

  1. Vlad
    Posted on December 19, 2011 at 19:58 Permalink

    Hi Malihu,

    I came back after a while because I love this gallery and just realized that it works very poorly in IE 7 and 8 (I don’t bother with 6 anymore) Take a look at the 5 demo page.
    The width doesnt render properly, the nice cirlce butons are square, and the auto scroll speed is all jumpy.

    I resolved some of these issues in my test server: http://chaoticgeometry.net/
    like using bg images for the buttons and forcing min-width in ie 7. but the jaggy movement is beyond me. Any suggestions?

    Reply
  2. Declan
    Posted on December 16, 2011 at 06:51 Permalink

    Hi there,

    Great Scroller ๐Ÿ™‚

    I am looking to place the next and previous arrows outside of the div class=”jThumbnailScroller” .

    Is this easily possible and if so how can I. Currently when I put it out of that div it won’t display on the page.
    ๐Ÿ™

    Thanks

    Reply
  3. John
    Posted on December 15, 2011 at 10:26 Permalink

    Hi,

    Nice work but one question, how can I specify a height of 100% in a vertical scroller so it resizes if a browser window is reduced by the user.

    Thanks.

    Reply
  4. Andrew
    Posted on December 13, 2011 at 00:36 Permalink

    Awesome tool! Quick question: First time I call ThumbnailScroller, I only get the first 11 (of 16) images to load. After that, everything works fine. Any thoughts? [When I add extra dummy thumbnails, all but the final 5 images will load on the first call. Again, additional calls work fine.]

    Reply
  5. Evan
    Posted on December 11, 2011 at 09:21 Permalink

    Great stuff…thanks so much for sharing! Question = Lets say I have 30 images (5 shown at a time) when you click the next button 3 times your viewing the images 15-20. if I click on image 16 it loads up that image (reloads the page) which effectively resets the scroller back to the initial position. Is there a way I can evaluate which image I am on (in some way) and then auto push the scroller to that position? (in this case it would auto scroll to the 3rd click over because the current image is located there) – having trouble wrapping my head around how that could work! …thanks

    Reply
  6. Colin
    Posted on December 8, 2011 at 08:01 Permalink

    Hey, I just want to say thank you for this plugin. It is truly awesome!

    One thing I was wondering, and couldn’t seem to find an answer in the comments, or by looking at the code.

    Is there a way for when you click on the arrows for more thumbnails to display, if they can skip one by one, instead of 5-10 at a time, or however many are next down the line?

    Reply
  7. Omar
    Posted on December 7, 2011 at 17:31 Permalink

    Hello!
    Your slider is so awesome you are great to be giving this thing away!
    I’m wanting to use the slider as a thumbnail navigation for youtube videos.
    In other words I want visitors of my site to browse using the slider and when a thumbnail is clicked the video is loaded into a specific div on the same page. is this possible?

    Please help almighty guru lol!

    Reply
  8. LocoGeek
    Posted on December 6, 2011 at 08:21 Permalink

    Great scripts, works great.
    Problem: building a website that uses a horizontal menu using Java Script.
    When I insert the thumbnail scripts, the scroller works as it should.
    But my horizontal menu disappears.

    When I remove the thumbnail scroller plugin (jquery.thumbnailScroller.js) before the , the horizontal menu re-appears. Of course the scroller doesn’t work either.

    When I reinstall the scroller plugin, the horizontal menu again disappears.

    Seems to be some sort of conflict, any advice?

    Reply
  9. Todd R
    Posted on November 30, 2011 at 00:16 Permalink

    I’m using the following for my scroller and it works fine if I set autoscrolling to 0. But if I change autoscrolling to any other number the scroller goes vertical instead of horizontal. Any ideas?

    scrollerType:”clickButtons”,
    scrollerOrientation:”horizontal”,
    scrollSpeed:2,
    scrollEasing:”easeOutCirc”,
    scrollEasingAmount:600,
    acceleration:4,
    scrollSpeed:800,
    noScrollCenterSpace:10,
    autoScrolling:0,
    autoScrollingSpeed:2000,
    autoScrollingEasing:”easeOutCirc”,
    autoScrollingDelay:500

    Reply
  10. Chris d.
    Posted on November 28, 2011 at 00:24 Permalink

    Hello,

    In regards to the horizontal thumbnail gallery with ‘previous’ and ‘next’ buttons, is there a way to have the buttons to rest in their own area as opposed to sitting on top of the thumbnails?Similar to this gallery on this webpage from flowplayer.org:

    http://flowplayer.org/tools/demos/scrollable/gallery.html

    I’ve tried tinkering with the css coding, but no luck…any help is greatly appreciated!

    Thank you,

    Chris d.

    Reply
  11. iwu
    Posted on November 23, 2011 at 18:37 Permalink

    Great script! I’ve managed to get an instance working. My question is, if I want multiple instances of the SAME scroller, I understand I can’t use multiple instances of the same “id.” How can I tweak the javascript so it’s linked to class and not an ID? Thanks!

    Reply
    • iwu
      Posted on November 23, 2011 at 18:46 Permalink

      Nevermind, I just figured it out. I wasn’t plugging in the correct class name in place of the ID. This script is now working in multiple instances beautifully. Thank you!!!

      Reply
  12. Jedi Knight
    Posted on November 21, 2011 at 13:27 Permalink

    For the Click Buttons scroller type, when we hover over the scroller, is there a way we can pause the scrolling animation?

    Reply
  13. Jitendra Vyas
    Posted on November 12, 2011 at 20:11 Permalink

    It’s very nice. Can you make it compatible with touch devices?

    Reply
    • malihu
      Posted on November 14, 2011 at 12:25 Permalink

      At the moment, only by setting scrollerType to clickButtons will do the trick for touch devices.

      Reply
  14. Dave
    Posted on November 11, 2011 at 23:53 Permalink

    Hello,

    Thank you very much for the awesome script, however I have found a bug. If you zoom in by holding ctrl and using the mouse wheel in EI9 and latest chrome, and then refresh the page… the mouse over (hoverprecise) horizontal scroller the last image is placed on a new line. I’ve replicated it with the demo from this site and on my own site as well.

    Here is a screenshot of what I’m talking about, I increased the div height so you can see the last image is on another line.

    The script works perfectly when at 100% browser zoom and below, but whenever the browser zoom is above 100% the last image is on a new line and messes up the scroller.

    http://remoteincome.com/bug.jpg

    I’ve visited other sites that are linked in these posts and some I can’t replicate the problem, while others I can. How can I fix this?

    Reply
  15. ruben
    Posted on November 11, 2011 at 14:26 Permalink

    It’s very interesting! I would like to know how can i put text content over each image. I tryed putting it on an but it don’t work.

    Reply
  16. Constantine
    Posted on November 3, 2011 at 00:49 Permalink

    Awesome script! Was wondering if there is a way to have two rows of images, or more. When i try to achieve this through css, lots of glitches occur. Any ideas?

    Reply
  17. uli
    Posted on November 2, 2011 at 15:19 Permalink

    you saved my life! thank you for this great script

    Reply
  18. gordo
    Posted on November 1, 2011 at 01:37 Permalink

    nicely done – exactly what i was looking for – will use o several sites. thanks!!!

    Reply
  19. globulenann
    Posted on October 28, 2011 at 16:03 Permalink

    For anyone having problems running this plugin with IE7, I found the following workaround (all modifications to be made in jquery.thumbnailScroller.js) :
    Add 60px to totalWidth line 34 and push the DIV to left/top 0 in all conditions before displaying by adding these 2 lines at line 36, after css/width.
    The code block line 33 thru 37 is then
    var totalWidth=$scroller.outerWidth(true)+60; $scrollerContainer.css("width",totalWidth); $scrollerContainer.css("left",0); $scrollerContainer.css("top",0);

    You got 60px of blank space after the images but it works and IE doesn’t put the last image on a new line. Didn’t find anything better…

    BTW thank you malihu for this great plugin !

    Reply
  20. Dave
    Posted on October 26, 2011 at 20:29 Permalink

    This plugin doesn’t seem to work with jquery 1.6.4 (or perhaps 1.6). Are there any plans to get this working with the newer versions?

    Thanks,
    Dave

    Reply
    • malihu
      Posted on November 14, 2011 at 12:22 Permalink

      I’ve tested the plugin with latest jquery (including 1.6.x versions) and works as expected. Can you provide more details about your tests?

      Reply
  21. Andrew
    Posted on October 26, 2011 at 19:38 Permalink

    Hi, excellent script! Works beautifully. I would like to make one tweak and would love some help… I’d simply like to position the arrows in a completely separate div rather than within the actual carousel div. What do I need to modify in the code in order for this to work?

    Thanks!!

    Reply
  22. Ola
    Posted on October 26, 2011 at 17:43 Permalink

    Hi!
    I can’t get the script to work. Any help would be very appreciated.

    Ola

    Reply
  23. Nay
    Posted on October 25, 2011 at 05:34 Permalink

    Great script, thanks!

    I’m wondering if it’s at all possible to turn the scrolling OFF, or pause it temporarily?

    When one of the links in my scroller is clicked, several things happen – the scroller moves so that the clicked image is centered on the screen, a new div is created, then some content is loaded into it, etc. While that new div is open, I’d like the scroller (behind it) to stop scrolling. When the div is clicked to close it, then the scrolling resumes. I can figure out the callbacks to make it resume, etc, but I just can’t figure out any command to make the scrolling stop. As long as the cursor moves over the scroller, it keeps scrolling. I’ve tried things like $(“#web”).thumbnailScroller().stop(); or just setting all the parameters (such as scroll speed) to zero, but none of that works. Any suggestions?

    Reply
    • Nay
      Posted on October 25, 2011 at 05:52 Permalink

      Ahhh….as usually happens, the moment I asked for help, I figured it out! I haven’t tested in all browsers yet, but so far in Firefox, my solution is working. I just created an invisible overlay div that I show or hide; when it’s ‘turned on’, the mouse movement isn’t picked up for the layer under it, so it doesn’t scroll. ๐Ÿ˜‰

      Reply
  24. James
    Posted on October 24, 2011 at 19:27 Permalink

    Is there any way to make it so the images are in a grid say 10×10 and can scroll both vertically and horizontally?

    Reply
  25. Wojciech Jablonski
    Posted on October 24, 2011 at 15:22 Permalink

    malihu – it still doesn’t work correctly in IE7 – flying content (see Demo 1). I think that vertical position (top or margin-top in source) shound’t be changed in horizontal mode.

    Reply
  26. Alex
    Posted on October 23, 2011 at 23:57 Permalink

    I want to add a margin-right on each thumbnail but the problem is that the last thumbnails are disappearing. So, my question is how to add a decent padding (margin) on those thumbnails without disappearing.

    Reply
  27. jm
    Posted on October 23, 2011 at 03:17 Permalink

    What is the simplest way to get a larger image changed out that has different heights and widths? I looked around the code and didn’t see anything to show me how this done. IS this some thing that happens within jQuery or is back at the HTML side of things. Sorry for such a basic question but I am new to jQuery. Nice plugin by the way… very smooth

    Reply
  28. Dave
    Posted on October 14, 2011 at 19:17 Permalink

    This is a fantastic little doodah! Very customiseable as well. Thanks for all the hard work

    Reply
  29. Tim Suchanek
    Posted on October 9, 2011 at 17:24 Permalink

    Hello!
    This plugin is really great. But … ๐Ÿ˜€
    IE doesnt show the box-radius and has also a problem with the transparent prev and next buttons.
    The transparency problem is solved with prefixr.com. Just paste the code of the jqueryThumbnailscroller.css and “prefixize” it, prefixr is great to make code work in all browser and if you want to minify the css.

    I use this plugin in a div that is invisble first (display:none) wich you can open with a click on a button. the plugin looks for the width and height of the div, wich equals zero if the div has display:none, so it doesnt work. To make it work, i just made the div visible, let the plugin initiate and after that the following easy jQuery code:
    $('#divname').css("display", "none");

    Thanks for the nice plugin!

    Reply
  30. Will
    Posted on October 5, 2011 at 11:55 Permalink

    Hi, is there a way to externally call the plugin to scroll to a specific element?

    Reply

Comments pages: 1 3 4 5 6 7 14

Post a comment

Cancel reply

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