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


753 Comments

Post a comment

Comments pages: 1 7 8 9 10 11 14

  1. Bruno
    Posted on October 16, 2012 at 20:23 Permalink

    Hi! Its working very fine to me! But i need one thing: It´s possible add one diferent class and take it to the center the anchor tag selected or mousehovered?
    Thnak´s for this great plugin.

    Reply
  2. Mohd Ilyas
    Posted on October 12, 2012 at 14:20 Permalink

    Can any body help me to have a continuous auto scroll with constant speed my Jquery Settings are as follows
    $(“#tS2″).thumbnailScroller
    ({ scrollerType:”hoverAccelerate”,
    scrollerOrientation:”horizontal”,
    scrollSpeed:2,
    scrollEasing:”easeOutCirc”,
    scrollEasingAmount:600,
    acceleration:4,
    scrollSpeed:800,
    noScrollCenterSpace:0,
    autoScrolling:1,
    autoScrollingSpeed:8000,
    autoScrollingEasing:”easeInOutQuad”,
    autoScrollingDelay:2500})
    });

    but its not working as I wanted to be its rotating only 1 time from and the speed increasing constantly while rotating.’you can see it on http://72.3.234.248/stoneworld/Default.aspx

    I would be very much tahnk full if any body would solve and mail me on ahe_ilyas_at_yahoo_dot_com

    I want constant speed continuous scroll

    Reply
  3. kim
    Posted on October 12, 2012 at 09:13 Permalink

    Great scroller! Very pretty!

    I’ve gone through some of the comments and didn’t notice this. How do I make an image appear above the scroller on click of the thumbnail?

    Any help would be appreciated!

    Thank you!

    Reply
  4. Latasia
    Posted on October 10, 2012 at 14:41 Permalink

    Wondering if there is any way to use a more current version of the jQuery library, like 1.8.2 instead of 1.5?
    I cannot use both together that I know of. If I just switch it all to the 1.5 jQuery library, then I lose functionality of other parts of my site that are utilizing 1.8.2 (:

    Great tutorial and amazing script! It’s really helping me understand jQuery more!

    Reply
    • malihu
      Posted on October 10, 2012 at 16:05 Permalink

      You can use the script with latest jQuery (1.8.x)

      Reply
  5. Aaron
    Posted on October 8, 2012 at 04:09 Permalink

    If the contents of are modified by AJAX, how do you call the function again to update the scroll bar? I see window.onload right now but I need to do this on the fly.

    Reply
  6. Rhys Davies
    Posted on October 7, 2012 at 00:15 Permalink

    Instead of having the content show on just one horizontal line, is there a way to add another horizontal row directly beneath the first?

    Reply
  7. chris
    Posted on October 2, 2012 at 16:14 Permalink

    hi, great plugin. Im using it for an auto scroll on a bunch of thumbnails. When i initiate the auto scroll it seems to accelerate as the scroll progresses, is there a way to keep the scroll speed the same all the way through the animation? Also, is there a way to loop back to the first thumbnail when it gets to the end of the the div, rather than reversing the animation?

    Reply
  8. lcdung
    Posted on September 30, 2012 at 16:55 Permalink

    Thanks so much!

    Reply
  9. tcuser
    Posted on September 26, 2012 at 17:27 Permalink

    This a really nice script. Is it possible to set a default position? Like set item number in the middle of scroller view field.

    Reply
  10. David
    Posted on September 24, 2012 at 06:36 Permalink

    Really want a fix for dramatic window resize.

    Going from 960 to 1920 width completely breaks the precise scrolling. I think it’s just dimension fix needed on resize. Should be quick fix for someone coding js at your level…

    Reply
    • David
      Posted on September 24, 2012 at 07:06 Permalink

      I actually just found a nice workaround.

      The main issue I was having was going from pretty small (windows size), to quite large. While I had modified the .jThumbnailScroller css to be a width of 80%, the math gets to be off and it looks quite broken to the user.

      My simple fix, which was a compromise, but still looks good, was append max-width: 960px, after width: 80% .

      Effectively, this make the math okay again 🙂 and it still looks good overall.

      Reply
      • Alberto
        Posted on December 27, 2012 at 10:06 Permalink

        this not solved in chrome and safari. only works in firefox and explorer… other solution??? you can view this bug in the demo (this page) resized in view the error.. some fix?

        Reply
  11. Philip Fredericia Sacht
    Posted on September 6, 2012 at 17:26 Permalink

    thank you so much for this module. helped me alot! free on top of that. mmm!

    i have a question for you though, regarding the autoscroll function contra the hover function.

    when i hover on the scrollbar on autoscroll it disables the autoscroll function and stops until page is refreshed once again.

    Q: is there a way to make is continue autoscroll after you hover on it?

    dearest phillip

    thank you in advance

    Reply
  12. Amrinder
    Posted on September 4, 2012 at 00:51 Permalink

    Hi malihu

    Thanks alot for this plugin.
    I have a problem, i have to make vertical scroller with two fixed arrows (one on top and one on bottom). when click on bottom arrow scroller should move downwards and vice-versa)
    Pls help

    Reply
  13. Mirko
    Posted on August 24, 2012 at 00:16 Permalink

    Hi Malihu,

    I was wondering if you maybe have an time estimate on when will you update the plugin.
    I think that swipe gestures are really needed to go along with hoverAccelerate version of the plugin.

    That functionality would make this plugin complete!! Or do you maybe have some dirty fix to make hover version work with swipe gestures? Maybe combining with hammer.js or some other script?

    Many thanks

    Reply
  14. seangou
    Posted on August 21, 2012 at 07:05 Permalink

    Great job malihu.. really useful plugin, thanksssss!!!!

    And now I got a problem. I upload images by using ajax and the scroll does not work. Is there any way to fix with that?

    Reply
  15. robert
    Posted on August 20, 2012 at 18:20 Permalink

    Excellent scroller, thank you so much for putting it out!

    Having trouble with the scroller type. They all work for me except the “clickButtons,” is there any reason why the other types would work and not this one? Is there any other settings I need to change if I want this type to apply? I’ve checked the code multiple times between the examples and mine and can’t figure out what the issue is.
    Thanks!

    Reply
  16. stereok
    Posted on August 16, 2012 at 21:38 Permalink

    the vertical scroll is still broken in IE, images scroll horizontally. Is there an update for that?
    Otherwise , very nice script.

    Reply
    • stereok
      Posted on August 16, 2012 at 22:51 Permalink

      solved the issue by changing the css jTscrollerContainer and .jThumbnailScroller#tS3 position to relative, yet the scroll is kind of jumpy in IE8.
      I have another Q though, I could use a function that would automatically scroll the script to a specific image id given in the href tag ( this way I can group images in categories, and when click on a category link the script will scroll to that category start image). Is that possible?

      Reply
      • malihu
        Posted on August 17, 2012 at 15:08 Permalink

        Not possible at the moment. I’ll definitely implement such feature on the next version of the plugin (I plan on developing version 2.0 soon). Thanks for the suggestion.

        Reply
        • stereok
          Posted on August 17, 2012 at 17:14 Permalink

          well, I managed to do some kind of a dirty fix that will suit my needs for now (I’m not much of a scripter) using Alro’s code from his comment.
          That is I’ve declared an empty namespace var. to be able to access Alro’s custom function inside the windows.onLoad code that will make the image with the specified ID go at the top of the scroller when called by an onClick event on my href. The only drawback is the scroll happens instantly, click on the link and the scroller jumps directly to that image. Something like this:

          window.IDscroll= {};
          (function($){
          window.onload=function(){
          $(“#tS3″).thumbnailScroller({
          //all the scroller params;
          });

          window.IDscroll.bh = function(myid) {
          var posOne= 10 – $(‘#’+myid).position()[‘top’];
          $(‘#tS3 .jTscroller’).css(‘top’, posOne); }
          }})(jQuery);

          and in HTML on the href tag I have the onClick=”window.IDscroll.bh(‘picture3’)” that will make the scroller jump to the picture with id=”picture3″ .

          Reply
        • Hemant
          Posted on October 17, 2012 at 11:56 Permalink

          I have same situation is there any updation for this on jquery thumbnail scroller, i have tried according to category but still slider images not loaded,as width is not set for jscroller container.please let me know asap .

          Thanks
          Hemant

          Reply
  17. Eric
    Posted on August 15, 2012 at 00:17 Permalink

    Hi! Thanks for this beautiful work. I’ve installed this thumbnail scroller on the new version of my website, using thumbnails pulled from a database. I’ve run into a curious problem that only seems to happen in Firefox, the last image will appear below the other images, pushing the format out.

    It happens here: http://durangoplants.com/durangoplants.php?plantdisplay=yes&id=3 but it does NOT happen here…

    http://durangoplants.com/durangoplants.php?plantdisplay=yes&id=18

    Any idea what I might be missing?

    Reply
  18. Joern
    Posted on August 13, 2012 at 15:57 Permalink

    Thanks for sharing, it is really nice.

    I found one issue. Using HTML5 doctyp <!DOCTYPE html>) causes a white border at the bottom of the thumbnails. In that case it looks like the calculated hight is different. Maybe you want/can fix that problem.

    Reply
    • Kirill
      Posted on February 13, 2013 at 10:45 Permalink

      It has nothing to do with the html version. White space at the bottom of images appears because display: inline is default.
      The solution is to add a css line:
      a img { display: block; }

      Reply
  19. Zac
    Posted on August 13, 2012 at 11:31 Permalink

    Sorry, one other question!

    For the Thumbnail Scroller, is it possible to snap to nearest image on scroll? Otherwise there are some images that are never ‘fully visible’. If you know what I mean.

    Eg. images that flow across 2 section

    Reply
    • malihu
      Posted on August 15, 2012 at 14:44 Permalink

      Not currently possible. Check comment 248 to see if another custom script I made suit your needs.

      Reply
  20. Biffa
    Posted on August 11, 2012 at 18:49 Permalink

    I adore this image scroller alot. However when I saw it on another site, the images popped out upon clicking which doesn’t happen in the live demo. (Be nice I’m a teenybopper teaching herself joomla /design/coding) Would I need to do something separate to make this happen?

    Reply
  21. lorenco
    Posted on August 11, 2012 at 01:05 Permalink

    hi,

    in your custom jquery ui what functions are included? one easing and other else?

    Regards

    Reply
    • malihu
      Posted on August 15, 2012 at 14:36 Permalink

      Just the core and easing functions of jQuery UI.

      Reply
  22. Zac
    Posted on August 10, 2012 at 07:53 Permalink

    Great plugin!

    Just wondering if you can suggest the best way to make the scroller move 1 thumbnail at a time, rather than a whole screen width?

    Reply
    • malihu
      Posted on August 10, 2012 at 17:42 Permalink

      The plugin does not provide an option to scroll by thumbnail. However, I’ve made a similar custom script that does what you need. Get it here:
      http://manos.malihu.gr/tuts/products-scroller.zip

      Reply
      • Zac
        Posted on August 12, 2012 at 09:18 Permalink

        Thank you! Much appreciated

        Reply
      • Zac
        Posted on August 13, 2012 at 11:23 Permalink

        Any idea how I could get this to still work in IE7? That is my only issue now 🙁

        Reply
  23. someone
    Posted on August 9, 2012 at 13:48 Permalink

    Hello,

    there is a serious bug in the script, if you resize the window on any platform or zoom in the browser on windows, the scroller gets messed up. I reproduced the issue even on your demo.

    thanks

    Reply
  24. Kevin
    Posted on August 8, 2012 at 18:44 Permalink

    Great script but i have some problems.

    Is there any way there is no actual ease animation? I mean, i just want ti to scroll with the same speed the whole time, as it is now, it just speeds up until it reaches the end point and in jquery ui ease effects there is no such thing.

    also, is there any way when you hover an image to just pause?

    one last thing, does anybody else has “jumpy” issues? the animation seems like going a bit shaky (as well as when hovering with mouse)

    thank you!

    p.s: basically what im trying to do is replace Flash Image Scroller FX with this script..

    Reply
  25. Daniel
    Posted on August 5, 2012 at 10:07 Permalink

    Hello,

    I’m having a problem with right-to-left content. My page has “direction: rtl” under body, and the scroll shows blanks after the first click. Any help would be appreciated! Thanks!

    Reply
  26. gil
    Posted on August 3, 2012 at 21:16 Permalink

    hi, great plugin and all but i have a problem, the code that is inside the body is making my code in the head not work, how can i fix this? here´s my code.

    any ideas ?

    <head> $(document).ready(function() { $('nav#primary a').hoverIntent( function () { $(this).prev().show('.1'); }, function () { $(this).prev().hide('.1'); } ); }); </head> <body> <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> </body>

    Reply
  27. robert
    Posted on August 1, 2012 at 05:57 Permalink

    hi,

    just want to make sure that, the only document that i have to modifi is only jquery.thumbnailScrollerOriginal.js? rigth?

    Thanks.

    Reply
  28. wasykes
    Posted on July 26, 2012 at 23:38 Permalink

    I am right in understanding that this doesn’t work with Magento?

    Reply
  29. jukrzy
    Posted on July 23, 2012 at 16:54 Permalink

    Hi, I have a problems with the horizontal scroller. On Firefox is works perfect with the hoverAccelerate, but when I try it on Chrome, it seems to give me a few thumbnails and then starts over on the next row instead of flowing in one line. Also to let you know, I’m scrolling articles and not just thumbnails. I hope you can figure out a solution for me. Thanks.

    Reply
    • Marcus Ellend
      Posted on February 28, 2013 at 20:04 Permalink

      I had the same problem here. You have to add a with declaration to the “a” tag style and then it will work. Example:

      .jThumbnailScroller .jTscroller a {– other stuff –; with: 180px;}

      Reply
  30. Meadsy
    Posted on July 22, 2012 at 23:50 Permalink

    Hi great script, thank you.

    I’m sorry if this has been addressed already but I have been unable to find it so far. Can I automatically scroll the scroller to the start by clicking a link?

    Cheers

    Reply

Comments pages: 1 7 8 9 10 11 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