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 6 7 8 9 10 14

  1. wasykes
    Posted on July 19, 2012 at 21:18 Permalink

    Sorry forgot to mention that this scroller has been implimented into a Magento theme, but for some reason the buttons are working to scroll the images.

    Here is the code used:
    <div id="tS3" class="jThumbnailScroller"> <div class="jTscrollerContainer"> <div class="jTscroller"> <?php if (count($this->getGalleryImages()) > 0): ?> <ul class="img-list"> <?php foreach ($this->getGalleryImages() as $_image): ?> <li><a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile());?>" class="fancybox" rel="product-images"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(60); ?>" alt="" width="60" height="60" /></a></li> <?php endforeach; ?> </ul> </div> </div> <a href="#" class="jTscrollerPrevButton"></a> <a href="#" class="jTscrollerNextButton"></a> </div> <script> jQuery.noConflict(); (function($){ window.onload=function(){ $("#tS3").thumbnailScroller({ scrollerType:"clickButtons", scrollerOrientation:"vertical", scrollSpeed:2, scrollEasing:"easeOutCirc", scrollEasingAmount:600, acceleration:4, scrollSpeed:800, noScrollCenterSpace:10, autoScrolling:0, autoScrollingSpeed:2000, autoScrollingEasing:"easeInOutQuad", autoScrollingDelay:500 }); } })(jQuery); </script> <script src="jquery.thumbnailScroller.js"></script>

    Once again, any assistance is appreciated.

    Reply
    • wasykes
      Posted on July 21, 2012 at 16:27 Permalink

      Buttons are not working :o|

      Reply
  2. Cris
    Posted on July 19, 2012 at 14:16 Permalink

    me again;)

    I fixed the buttons problem (i just deleted by mistake the button links from my html..ups)

    now the buttons appear, but both in the corner up-left.

    any idea why? I’m gonna touch the css, but maybe its a bug.

    ah! another bug! on Firefox sometimes doesn’t show all the pictures.

    ps: I love this script =)

    Reply
    • Cris
      Posted on July 19, 2012 at 16:42 Permalink

      mmmm… and the arrows don’t show on Firefox :S

      Reply
  3. Cris
    Posted on July 19, 2012 at 11:44 Permalink

    hi, it’s me again =)

    Im changing the scroll from hoverprecise (in this option everything works properly) to buttons, but when I change this value here..

    jQuery.noConflict();
    (function($){
    window.onload=function(){
    $(“.jThumbnailScroller”).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
    });
    }
    })(jQuery);

    it doesn’t move neither the buttons appear…. do you have any idea why can it be?

    thank you very much

    Reply
    • Cris
      Posted on July 19, 2012 at 19:34 Permalink

      solved, i deleted the links by mistake =)

      Reply
      • luisa
        Posted on January 23, 2013 at 05:06 Permalink

        Cris ,
        I have the same problem, but I’m not sure what links you are referring tom
        thanks

        Reply
  4. inspire
    Posted on July 18, 2012 at 18:35 Permalink

    Exactly what I was looking for

    Reply
  5. Seb
    Posted on July 18, 2012 at 14:00 Permalink

    Hello,

    I’ve recently implemented this thumbnailscroller (I first gave a try to the also great custom scroller) in one of my website’s pages and it works very well.
    Maybe the following question will be here somehow out of place and I will understand if I get no reply to it.
    I’m totally new to web design, I’ve just learned html and css by myself and I think I’ve done so far good stuff in my website. I’m now implementing enhancements like the thumbnail scroller.
    I’m currently working off-line using notepad++, and html 5 doctype.
    When I launch the page with the plugin in IE9 I get the browser’s allow or block scripts in this page question. But if I open this page’s demo in the same browser it loads without any interruption.
    The question is why the same script pops the question up if contained in my page and not if contained in yours?
    It also makes me wonder what else I must learn besides html and css.
    Thanks a lot.

    Reply
    • malihu
      Posted on July 18, 2012 at 14:11 Permalink

      Hello,

      It’s just a security feature of IE when opening pages that contain scripts locally. Just click “allow” 😉 When you open pages from a live server (online) you don’t get such messages (that’s why you don’t see the security alert when you open the demo).

      Reply
      • Seb
        Posted on July 18, 2012 at 14:40 Permalink

        So it’s a fact of live or local execution, that simple it is! It makes me feel reasured cause I’m just starting to swim into the scripts’ waters and I already have lots of wrinkles in my forehead with all the noscript coding. Thanks again.
        Somewhere in the future I’ll post a comment filling the website input so you can see your plugins in action if you want.

        Reply
  6. Stacked Images when not 600px fixed size
    Posted on July 16, 2012 at 20:51 Permalink
  7. wasykes
    Posted on July 15, 2012 at 22:56 Permalink

    For some reason I can seem to get the buttons on the scroller to scroll the images up and down.

    Any assistance would be highly appreciated.

    Reply
  8. wezyr512
    Posted on July 14, 2012 at 13:57 Permalink

    Thank you very much for scroller!
    I have little problem with moving thumbnails in axis Y. How can I disable this? Is any way to remove this option in script? My thumbnails move about 10px up and down invert direction than mouse cursor. I used in my page parallax script to make layers moving but this should only work in div with class “shell”. When I move out whole thumbnail scroller div from “shell” is still this effect on thumbs. When I even remove parallax script from page is not help. I’ll be appreciate for help! Thanks a lot!

    Reply
    • wezyr512
      Posted on July 26, 2012 at 16:55 Permalink

      Malihu, can you help me with this? How can I remove Y axis in script? I’ll be grateful

      Reply
      • malihu
        Posted on July 27, 2012 at 16:24 Permalink

        Find line:
        $scroller.stop(true,false).animate({left:destX,top:destY},options.scrollEasingAmount,options.scrollEasing);
        Replace with:
        $scroller.stop(true,false).animate({left:destX},options.scrollEasingAmount,options.scrollEasing);

        Reply
        • wezyr512
          Posted on August 2, 2012 at 21:57 Permalink

          Works great! Thank you very much for plugin and for you help!

          Reply
  9. Chris
    Posted on July 12, 2012 at 16:05 Permalink

    Very nice script, it works beautifully. One question. Is there a way to make it start somewhere other than thumbnail 1. So if I had a row of 50 thumbs for example, could I make it load with thumb #25 showing giving me the option to scroll left and right to see the others?

    Many thanks.

    Reply
  10. cris
    Posted on July 10, 2012 at 20:44 Permalink

    Hello, I put your plugin in my page, but when I enter with mobile or ipad or any touch device the scroll (non buttons version) is not working properly, any suggestion? or should I switch to the buttons version?

    Thank you

    Reply
    • malihu
      Posted on July 11, 2012 at 02:46 Permalink

      Yes, currently there’s no touch-device support for non-buttons scroller. I’ll definitely implement such feature on the next plugin update.

      Reply
      • flavin
        Posted on April 2, 2013 at 21:08 Permalink

        Now the ipad, iphone are supported?

        thanks for you great plugin

        Reply
        • malihu
          Posted on April 2, 2013 at 21:18 Permalink

          I’ll release version 2.0 very soon. Among others, it’ll support all touch devices (iOS, Android, MS windows 8 etc.)

          Reply
  11. Herman
    Posted on July 9, 2012 at 10:03 Permalink

    This is a great plugin. Is it possible when clickin the right or left arrow, it slides not 100% of width, let say slide 100px for every click? Thx Dude!!

    Reply
    • malihu
      Posted on July 9, 2012 at 15:12 Permalink

      Nope sorry. I’ve made another custom plugin that works only horizontally with left/right buttons and scrolls the images by each next image width. Depending on what you need to do, this could be what you need. Let me know so I can send it to you.

      Reply
  12. cristina
    Posted on July 8, 2012 at 12:44 Permalink

    Hello,

    I wonder what can I do to make the miniatures fit the scroller when the miniatures are bigger than the scroller. Any help would be welcome, I’m new in jquery.

    Thank you.

    Reply
    • malihu
      Posted on July 9, 2012 at 15:16 Permalink

      You can do it with css. For example, if you want your images to fit in 150 pixels height, you could do something like:
      .myImagesClass{ height: 150px; width: auto; }

      Reply
  13. Bryan
    Posted on July 5, 2012 at 23:05 Permalink

    love the scroller — it’s just the functionality I needed on my personal site.

    One question: is it possible to change the background color of the scroller window? I’ve fiddled with everything that looks like a hex color code in your script with no result.

    Is there a value where I can use a standard 6-digit hexadecimal code?

    Thanks in advance… my programming knowledge is limited!

    Reply
    • Chris
      Posted on July 12, 2012 at 16:08 Permalink

      Have you tried adding background-color:#ff3344 (for example) to .jThumbnailScroller ?

      Reply
  14. title on hover
    Posted on July 2, 2012 at 18:34 Permalink

    Hi, I would like to know if there is any way to show the title of the picture when you put the cursor on the picture (on hover).

    Thank you

    Reply
  15. Michael M
    Posted on July 2, 2012 at 03:56 Permalink

    Hi! Thanks for all the wonderful work you do!

    I was wondering if it’s possible to scroll divs instead of images? I am going to go ahead and try it anyway, i couldn’t see anything in the comments. Thanks!

    Reply
    • Michael M
      Posted on July 2, 2012 at 04:59 Permalink

      I’m dumb, I checked the code and it makes sense. This works AMAZINGLY for scrolling content as well. Thanks again for being amazing!

      Reply
      • malihu
        Posted on July 2, 2012 at 12:51 Permalink

        Indeed you can scroll anything you want. Sorry for not posting an example of scrolling other content but I focused on images as it’s the most common implementation.

        Thanks for your comments Michael 🙂

        Reply
    • abdou ziada
      Posted on July 12, 2014 at 05:35 Permalink

      hi
      How u can scroll divs instead of images?

      Reply
  16. Maria
    Posted on June 30, 2012 at 05:50 Permalink

    Hi,

    First, thanks for the wonderful scroller.

    Now that I’m convinced this is the best scroller I could get, I got stuck on 2 issues:
    1- My content is RTL and I need to invert the whole scroller motion. Is there a way to have the scroller scroll right to left?

    2- I’ll be using the “clickButtons”, I want the scroll “space” to be less than the full width. Rather, I want to set it to something small so that the user controls the scrolling as my images are being cut midway using the default scrolling width. How to assign the scroll offset width?

    Thanks in advance.

    Reply
  17. jaouadnet
    Posted on June 29, 2012 at 15:11 Permalink

    It’s me again I just would like to know how make 3 scrolls that looks exactly the same (horizontal and width:100%) in the same page.
    i think for me help

    Reply
    • malihu
      Posted on June 30, 2012 at 07:21 Permalink

      Hi,
      Give them the same class (e.g. .myClass), style this class via css and call the plugin like this:
      $(".myClass").thumbnailScroller();

      Reply
      • Cristina
        Posted on July 1, 2012 at 21:05 Permalink

        should I change the first class jThumbnailScroller for myClass? or how do you mean?

        thank you =)

        Reply
        • malihu
          Posted on July 2, 2012 at 12:45 Permalink

          No, you can keep jThumbnailScroller if you want and call the plugin:
          $(".jThumbnailScroller").thumbnailScroller();

          Reply
          • cristina
            Posted on July 2, 2012 at 15:52 Permalink

            thank you so much for your help , you’re amazing for answering to all of us.

            =) peace!

  18. Cristina
    Posted on June 28, 2012 at 18:25 Permalink

    It’s me again, I just would like to know how to make 2 scrolls that looks exactly the same (horizontal and width:100%) in the same page.

    Reply
  19. Cristina
    Posted on June 28, 2012 at 17:45 Permalink

    Hello, first of all say that this scroller is great, not very often you find something made with good taste =)
    Second say that I’m trying to put it on my website, in fact 2 scrolls the same, so I don’t need the id selector, but I dont know how to use it to call the function, Im trying with the id but It doesn’t work properly, it not even scroll. So I would like to ask for some help if possible.

    thank you

    Reply
  20. Matt
    Posted on June 18, 2012 at 07:56 Permalink

    I love the plugin, but it seems there is a problem with the scrolling function. It was scrolling as normal, but now when scrolling from right to left, it also scrolls down from top to bottom and the images disappear. How can I fix this?

    Reply
    • malihu
      Posted on June 26, 2012 at 21:44 Permalink

      Hi,
      Probably your contents height is greater than the container. Check your css to see if jThumbnailScroller has the correct height of its contents.

      Reply
  21. brad-t
    Posted on June 17, 2012 at 06:35 Permalink

    Hi malihu,

    Thanks for the great idea and for all of your support since you published this. I have a question that hopefully you can help me with. I am using what’s likely a much narrower implementation of this than usual, and what I would like to know is:

    Is it possible to set it up so that when clicked, rather than moving to the next unseen section of images, it centers the next image in the sequence? The issue for me is that sometimes we never see the entirety of the image together:

    For ten images, nine clicks would be necessary to cycle through them all.

    Reply
  22. Nishant
    Posted on June 16, 2012 at 09:11 Permalink

    Hi I love this script but I have a small problem In this link (http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_absolute_position.html) how can I Manage the speed of scrolling..???

    Sry for Bad english….

    Reply
    • malihu
      Posted on June 26, 2012 at 21:49 Permalink

      You cannot change the scrolling speed (there’s none). Scrolling position is determined by how fast you move the mouse over the images area (e.g. if you move mouse slowly, the scrolling “speed” is slow).

      Reply
  23. Rodrigo
    Posted on June 12, 2012 at 19:10 Permalink

    Hello,
    This code is fantastic, but I need a little help with this code.

    I am using this code to display in the div about 200+ pictures, then when someone choose the picture, the scroller should fix the image select at the center and the others in they respective position.

    Example:
    If i have selected image15

    then it should display:
    image13 image14 IMAGE15 image16 image17

    Have someway to autoscroll to this position?

    thank you;

    Reply
  24. arnlig3550
    Posted on June 11, 2012 at 18:48 Permalink

    hello,
    what is the solution for put two times the same scroller on the same page?
    I did a copy / paste the code but only one works, the second does not work!
    thanks !

    Reply
  25. Mika
    Posted on June 9, 2012 at 09:47 Permalink

    Hello, I’m using your plugin is fantastic.

    But I have a little problem.

    I’m using it with: scrollerType “clickButtons” and scrollerOrientation “horizontal” but if someone clicks on the buttons while loading the images on the screen scroll the browser goes to the top.

    It’s annoying, because I’m using the plugin in the bottom of the page, and you have to load many images.

    If an impatient user, clicks, position shifts to the top of the page.

    As I can avoid this? Thank you!

    Reply
    • robert
      Posted on August 17, 2012 at 22:34 Permalink

      I’m running into this problem too… Did you ever figure this out?

      Reply
  26. Camille
    Posted on June 6, 2012 at 20:56 Permalink

    Thank you for developing this scroller! Is there a way to add a short caption under each image?

    Reply
  27. MSR
    Posted on June 6, 2012 at 19:48 Permalink

    Hello,
    Thanks for the scroller. It works great. I have a small request.
    Is there a way to set a scroll position. I want to remember the scroll position of the user and show the user the same position after the page is re-loaded.
    Thank you in advance.
    MSR

    Reply
  28. Dan V
    Posted on June 5, 2012 at 21:43 Permalink

    Hi. I’m using the expanding horizontal scroller…

    When the browser window is more than about 1300px wide, and the scroller is all the ways to the right, I get a jitter like some people have mentioned here before. Have you found a solution to this yet?

    Also, (apologies if this is an obvious question…) but I have some interactive elements within the scroller which I would like to have stop the scroller on mouseenter. How do I do this?

    Here’s a link if you need… http://www.wp.mpa.voyced.com

    Thanks so much and awesome work!

    Dan

    Reply
  29. Olivier
    Posted on June 4, 2012 at 23:10 Permalink

    Hi,

    Thank you for the plugin, is very nice,

    But I have a little bug (maybe me), I want a horizontal scroll, and this working,

    But this is scrolling vertically also, top =-4px on .jTscroller, so this is a good effect for the eyes,

    How can I have take off the vertical scrolling ?

    http://www.capponiconstruction.com/category/group-qualifications/

    Thanks
    Olivier

    Reply
    • malihu
      Posted on June 5, 2012 at 15:28 Permalink

      Your jThumbnailScroller has 71 pixels height. It should be 68 pixels just by inspecting your code with firebug. All your divs inside jThumbnailScroller are 68 pixels high.

      Reply
      • olivier
        Posted on June 12, 2012 at 02:48 Permalink

        Thank you for the tip,

        I have another question, how can I always display left and right arrow. The script display none my arrow

        Thanks
        Olivier

        Reply
        • olivier
          Posted on June 12, 2012 at 02:52 Permalink

          And display the arrow on the left and right of the div .jTscrollerContainer, so not in the picture ?

          Reply
  30. Mario
    Posted on May 28, 2012 at 12:51 Permalink

    Hi, if i enable auto scrolling in horizontal , the scroll works, but, it moves also in vertical position. Is there a configuration I mess?

    Reply
    • malihu
      Posted on May 28, 2012 at 13:19 Permalink

      Hi,
      It’s best to set the exact height of the container in css (including inner heights, margins, paddings etc.)

      Reply
    • Mario
      Posted on May 28, 2012 at 13:24 Permalink

      Solved , in the css I’ve modified
      .jThumbnailScroller .jTscroller{position:relative; height:100%;
      with

      .jThumbnailScroller .jTscroller{position:relative; height:100px;

      using the same dimension in pixel as the container.

      Reply

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