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

  1. alambrado
    Posted on May 16, 2013 at 00:24 Permalink

    Thanks for the script

    Reply
  2. criação de site
    Posted on May 9, 2013 at 00:08 Permalink

    do i need to delete some code?

    Reply
  3. john
    Posted on May 3, 2013 at 16:10 Permalink

    having a problem with the script..

    It loads and works fine.. however some of my other scripts stop working.. (Prettyphoto)

    Wondering if there is a way to get them to work together?

    Reply
  4. yaron
    Posted on April 28, 2013 at 14:58 Permalink

    hi.
    I find this plugin very good, and started some test to implement it on my web site.
    My thumbnails are all in same size (i.e 80×105).
    Im using the scroller with “clickButtons” type.
    Initial state is that i show 3 of them side by side inside a . and it looks good (same margings both sides..

    When I click the NEXT buttom few times, and thumbnails are scrolling, after a few scrolls to the same direction i lose the position of the thumbnails, i.e. i see “half” of thumb in the left, and half of thumb in right.

    My problem/question is:
    How you can controll the x-axis px movement amount ?

    ty

    Reply
  5. Rico
    Posted on April 25, 2013 at 04:29 Permalink

    Hi Malihu and thanks for your great plugin(s)!

    I’m trying to use jquery thumbnail scroller from inside a tab switcher. All is well when the tab containing the scroller is visible on page load; but if the page opens on another tab, since visibility is 0, jquery thumbnail scroller initializes with a height of 0.

    I believe I would need to issue a re-initialize command to the jquery thumbnail scroller when its tab is shown. Is there a simple way to do that? (see http://elricoshow.com)

    Thanks!

    Reply
  6. Udeh
    Posted on April 19, 2013 at 14:45 Permalink

    Thanks..

    Reply
  7. Aruna
    Posted on April 12, 2013 at 14:06 Permalink

    Hi,

    The thumbnail scroller works great on Firefox and chrome. But not in IE. When I hover over the images, instead of scrolling the whole div “jtscroller” shifts all the way out. Looking at the html in developer tools, everytime I hover the inline style “left” is a huge negative number.

    How do I fix this? I was able implement it without any issues in other browsers.

    Thanks
    Aruna

    Reply
  8. Andy
    Posted on April 5, 2013 at 19:49 Permalink

    Exactly what i was looking for. Thanks for sharing this info.

    Reply
  9. Menno
    Posted on March 25, 2013 at 12:30 Permalink

    Hi there! Can it be that the demo’s are no longer functional?

    Reply
  10. Desenvolvimento de Loja Virtual
    Posted on March 7, 2013 at 16:14 Permalink

    Thanks for the script! Very good.

    Reply
  11. Pavel Janecek
    Posted on March 1, 2013 at 07:29 Permalink

    HI, nice script so I have ui-1.10.1 for my website and not able to use this? is it my mistake or script is not fit for that version of jquery? is there anybody who knows? many thanks

    Reply
  12. stereo
    Posted on February 27, 2013 at 19:26 Permalink
  13. Robert
    Posted on February 23, 2013 at 18:36 Permalink

    There is a problem with web kit based browsers, not fully load the thumbnails, to update and loaded all updates again if not fully charged. This sucks. do not fix it since 2011.

    Existe un problema con navegadores basados en web kit, no carga completamente las miniaturas, al actualizar cargan todas y si nuevamente se actualiza no carga completa. Esto apesta. no arreglan esto desde el 2011.

    Reply
  14. Susan Delgado
    Posted on February 17, 2013 at 17:17 Permalink

    Your plugin is great! I wanted you to know that I believe someone has been selling you plugin as there own. http://codecanyon.net/item/thumbnail-scroller-wordpress-plugin/2068683
    I just wanted to help you protect what is yours.

    Reply
  15. Dale McConnell
    Posted on February 5, 2013 at 14:26 Permalink

    I had to modify it somewhat to allow the use of external elements as controls. The external elements of choice can now be set in the initial call.

    Oringinal
    var defaults={ //default options scrollerType:"hoverPrecise", //values: "hoverPrecise", "hoverAccelerate", "clickButtons" scrollerOrientation:"horizontal", //values: "horizontal", "vertical" scrollEasing:"easeOutCirc", //easing type scrollEasingAmount:800, //value: milliseconds acceleration:2, //value: integer scrollSpeed:600, //value: milliseconds noScrollCenterSpace:0, //value: pixels autoScrolling:0, //value: integer autoScrollingSpeed:8000, //value: milliseconds autoScrollingEasing:"easeInOutQuad", //easing type autoScrollingDelay:2500 //value: milliseconds }; var options=$.extend(defaults,options); return this.each(function(){ //cache vars var $this=$(this); var $scrollerContainer=$this.children(".jTscrollerContainer"); var $scroller=$this.children(".jTscrollerContainer").children(".jTscroller"); var $scrollerNextButton=$this.children(".jTscrollerNextButton"); - var $scrollerPrevButton=$this.children(".jTscrollerPrevButton");

    Changed to
    var defaults={ //default options scrollerType:"hoverPrecise", //values: "hoverPrecise", "hoverAccelerate", "clickButtons" scrollerOrientation:"horizontal", //values: "horizontal", "vertical" scrollEasing:"easeOutCirc", //easing type scrollEasingAmount:800, //value: milliseconds acceleration:2, //value: integer scrollSpeed:600, //value: milliseconds noScrollCenterSpace:0, //value: pixels autoScrolling:0, //value: integer autoScrollingSpeed:8000, //value: milliseconds autoScrollingEasing:"easeInOutQuad", //easing type autoScrollingDelay:2500, //value: milliseconds nextButton:'#next', prevButton:'#prev', }; var options=$.extend(defaults,options); return this.each(function(){ //cache vars var $this=$(this); var $scrollerContainer=$this.children(".jTscrollerContainer"); var $scroller=$this.children(".jTscrollerContainer").children(".jTscroller"); var $scrollerNextButton=$(options.nextButton); var $scrollerPrevButton=$(options.prevButton);

    Reply
  16. Ephraim
    Posted on February 5, 2013 at 02:37 Permalink

    Great plugin!
    Hoping you might have a solution for touch screens…??

    Reply
    • malihu
      Posted on April 18, 2013 at 13:33 Permalink

      Right now I’m developing version 2.0 of the plugin which will support touch-devices via touch-swipe scrolling (for iOS, Android, Microsoft tablets etc.).

      Reply
  17. Greebo_Gumjob
    Posted on January 31, 2013 at 19:31 Permalink

    Hi there.
    I did love this scroller until I found an awful bug. When you use the browser zoom, it totally breaks. Is there a way around this?

    Reply
    • malihu
      Posted on February 1, 2013 at 15:41 Permalink

      This happens on webkit browsers (known issue). I’ll fix it on the next plugin version.

      Reply
    • Christina Beymer
      Posted on May 4, 2013 at 09:38 Permalink

      What browser does it break in? What do you mean by break? Does it work if you reload. I can’t duplicate it. I tried in IOS (double tap) and it was fine. Are you talking about the command + zooming?

      Thanks!

      Reply
  18. Vincent
    Posted on January 10, 2013 at 10:34 Permalink

    Hi, I appreciate your work. It is very useful.

    But one thing I would suggest is: is it possible to make a scroller work if we change the width of jScrollerController in runtime? It is more flexible. I.e. developers can add more photos, or remove them as they like.

    Reply
    • malihu
      Posted on January 10, 2013 at 12:57 Permalink

      Hi and thanks a lot for the feedback!

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

      At the moment I’m upgrading few image galleries (which is very time consuming) so I’ll probably publish the new version in 3 or 4 weeks.

      Reply
      • Marcel R
        Posted on April 17, 2013 at 13:54 Permalink

        Hi Malihu,

        Great plugin by the way. Tell me, will the upgraded plugin be responsive too? I’m finding that my websites plugins are needing to be upgraded making way for more and more tablet and smartphone usage. (responsive, touch, swipe etc)

        Reply
        • malihu
          Posted on April 18, 2013 at 13:35 Permalink

          Next version will fully support touch devices.

          Reply
      • Bush
        Posted on April 20, 2013 at 06:48 Permalink

        Do you have an updated ETA for the new version?

        Reply
        • malihu
          Posted on April 20, 2013 at 11:17 Permalink

          Early May (in about 2 weeks).

          Reply
  19. Dave
    Posted on January 10, 2013 at 04:27 Permalink

    Hi,

    I have 60 images and was wondering what controls the width of the scroll on the “on click” version.

    Reply
    • Dave
      Posted on January 10, 2013 at 05:09 Permalink

      For instance if I set the width to 1022 px, does the scroller scroll 1022 px when I click the next button?

      By the way, excellent job on this!

      Reply
      • malihu
        Posted on January 10, 2013 at 12:41 Permalink

        Yes, the scroll amount is the scroller’s visible width.

        Reply
  20. Oleg
    Posted on January 7, 2013 at 22:38 Permalink

    We are looking forward to use your thumbnals-scroller plugin in JSF (JavaServer Faces). This is exactly what I need currently, but we need a new version (you mentioned in the last post) as soon as possible. Please post here a link when it’s finished. Thanks.

    Reply
    • malihu
      Posted on January 8, 2013 at 01:23 Permalink

      I’ll try to include and publish at least the basic upgrades & features (better scrolling functions, touch support, dynamic elements etc.) as soon as possible.

      Reply
      • Oleg
        Posted on January 8, 2013 at 15:48 Permalink

        Basic functionality is fine.

        One question yet. Can images be loaded lazy? We have thumbnails which are loaded from a backend system dynamically. The loading takes some time. I would like to show placeholders first and load images when they are coming into the view (visible area). That mean, they will be loaded when scrolling. Is it possible with your plugin?

        Thanks for your effort! Looking forward.

        Reply
        • malihu
          Posted on January 8, 2013 at 18:42 Permalink

          I think you would need to give images a fixed width/height and call thumbnailScroller function on document ready (instead of window load). I’ll try to implement an automatic way of lazy-loading images on the next version.

          Reply
  21. Alberto
    Posted on December 27, 2012 at 10:07 Permalink

    i have error in chrome and safari. when i resized the window only works in firefox and explorer… i read some fix in this page but. not resolve my problem.??? you can view this bug in the demo (this page) resized and view the error.. (chrome)… some fix for this? help

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

      on hoverAccelerate

      Reply
      • malihu
        Posted on December 27, 2012 at 11:13 Permalink

        I’ll try to update the script with an updated hoverAccelerate function within the next week. Thanks for the feedback.

        Reply
        • Alberto
          Posted on December 28, 2012 at 23:13 Permalink

          Thanks Malihu! your are great bro!
          you can tellme when you finish? Reply this or sendme a email =).. or only update in the page, i still monitoring…. happy holidays y new year

          Reply
          • malihu
            Posted on December 29, 2012 at 01:40 Permalink

            I’m reading almost every comment before I finish a new plugin version in order to include users requests etc., so I’ll probably also reply here when done.
            Happy holidays 🙂

  22. Andrew
    Posted on December 23, 2012 at 10:35 Permalink

    Awesome script! Thank you!

    I was wondering if I wanted to hide the container of jThumbnailScroller, how do I make the script work when the container is hidden? Right now I’m hiding the container after setting scroller options inside window.onload function.

    If I try to hide the container before the thumnailScroller function, it doesn’t work properly,

    Thanks!

    Reply
  23. Big Chris
    Posted on December 21, 2012 at 15:06 Permalink

    I love these plugins. Well done Malihu. And thank you!

    Just a quick question on the thumbnail scroller…. you mentioned on a previous reply back in July (2012) that the next iteration of the plugin should support touchscreen “swipe” – i.e. to enable the thumbnail scroller to work by users swiping the gallery.

    Do you have an idea when the next iteration may be released….?

    I have had a play with your full-screen gallery (with thumbnails) and added an automated “timed slideshow” element to the script so when someone presses “play” it hides everything but the fullscreen picture and the “play/pause” button… works very well actually!

    The icing on the cake would be getting the thumbnail scroller to work on touchscreens… this would be one hell of a fullscreen gallery if we could get this working! All thanks to you!

    Regards,

    Chris

    Reply
    • malihu
      Posted on December 23, 2012 at 17:42 Permalink

      Hi Chris and thanks for your comments 🙂
      If everything goes well, next version will be released within January. I’m currently finishing a big update on the fullscreen image gallery that’ll have the touch-swipe support. I’ll publish the gallery update very soon (within the next couple of days).
      You can take a sneak-peek of the scroller here (please note that this link is beta and will probably change as I’m testing all kinds of stuff there).

      Reply
  24. wynn
    Posted on December 18, 2012 at 17:08 Permalink

    Hi, is it possible to join a lightbox?

    Reply
  25. bobsov
    Posted on December 1, 2012 at 22:37 Permalink

    The scroller plugin is great. However, it does not work with twitter bootstrap modal window. Any suggestion in tweaking css to make it work?

    Reply
  26. adoor
    Posted on November 17, 2012 at 19:48 Permalink

    Hi, this plugin is amazing!
    I want to use it in my WordPress website, but when I put

    into

    Conflict happens. All of my plugin fucked up.
    Is it because there’s other versions of jQuery working in my website?
    How do I combine them?
    Thanks very much!

    Reply
    • adoor
      Posted on November 17, 2012 at 19:50 Permalink

      sorry,it’s this script into :

      Reply
      • adoor
        Posted on November 17, 2012 at 19:51 Permalink

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> into<head></head>

        Reply
  27. Adam
    Posted on November 7, 2012 at 20:10 Permalink

    Hello,
    A really good and stylish plugin, good work.
    I use the plugin for text and I would like to know how I can get the height to be dynamic.
    Right now, the height must be specified in pixels, is there any quick fix to make it to be auto.

    Regards

    Reply
  28. Lore
    Posted on November 6, 2012 at 06:27 Permalink

    Hi,
    I’d like to see an update which works with the most recent version of Jquery.
    Thanks!

    Reply
    • malihu
      Posted on November 7, 2012 at 18:15 Permalink

      Hello,
      I’ve tested the script with jquery 1.8 and it does work. Which version of jQuery and jQuery UI are you using?

      Reply
    • Stephanie
      Posted on June 7, 2013 at 22:09 Permalink

      Me too!

      Reply
  29. Patrick
    Posted on October 27, 2012 at 23:06 Permalink

    I’m developing a website for a friend and found this amazing plugin. But I’m not able to get it autoscrolling. If possible, I’d like to have both features, autoscroll and mouse action. Does anybody have a suggestion?

    Reply
  30. Abell
    Posted on October 19, 2012 at 01:06 Permalink

    This works great, I have a lot of pictures Im trying to slide through but the scroller will show half of the next one and then when I click the next button it only shows the other half of that picture, is there any way I can tell it how many pixels for each section (each section you see till you say next)?

    Reply

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