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 4 5 6 7 8 14

  1. Colleen
    Posted on March 19, 2012 at 17:29 Permalink

    I’m using this several times on one page. They are all the same width. But some scrollers don’t actually need to scroll. Is there a way to turn off that functionality for certain scrollers on the page but still the the mouseover/opacity ability?

    Reply
  2. Dave
    Posted on March 18, 2012 at 15:27 Permalink

    I’ve run up against an odd bug with this. If you put the hover variant of the scroller in a wrapper with a fixed position, it is unable to recognize where your mouse is when you scroll the body. The longer you scroll, the longer the dead zone becomes.

    Another bug I’ve run up against, is if you move the scroller after it initializes, then it adds white space equal to the amount you’ve moved it to, which throws off the scrolling.

    It’s a great plug in and I’m really happy to have it, but if there’s any chance you could look into these two problems, then I’d be most grateful.

    Reply
  3. Lilith
    Posted on March 17, 2012 at 22:47 Permalink

    Hola
    whats the Licence of this script ?
    Its open source ? If yes under which license is (GNU, MIT etc) ?

    thanks in advance

    Reply
  4. SonaliS
    Posted on March 15, 2012 at 14:34 Permalink

    hi i am facing problem using scroller horizontal one working 4 our client….for ie and chrome.in IE once scrolled the space appear doubly blank area where in it should end. and in chrome. overlapping is happing. Please reply soon.

    Reply
  5. Chris James
    Posted on March 15, 2012 at 01:53 Permalink

    Works great, my only question is when using the ClickButtons can I control how far my content scrolls to the left or right, right now it defaults to exactly the width of the page, how can I change that, I tried doing it myself however couldn’t figure it out

    Reply
  6. besucher80
    Posted on March 13, 2012 at 10:24 Permalink

    Hi, this code ist great. Thanks for this work. Could you give me a suggest , how to make the slider work like this on:

    http://www.analog.de/

    In the middle of the page theres the slider. It goes about the first and last picture. At the moment you have to go far left/right with the mouse to see the hole picture.

    You understand?

    Thanks

    Reply
  7. shooo.xz
    Posted on March 12, 2012 at 16:11 Permalink

    Welcome, for all those who got problem with thumbnail scroller on ie7 and i assume all have this problem! Ie7 behave not very well when display:inline-block; *display:inline; is used. Therefor your scroller wont work properly. The hack for this is applying to .jThumbnailScroller .jTscroller in css file after displays rule – zoom: 1.
    And whats also important – fixed height same as .jThumbnailScroller has. I tested it on win xp ie7 and it works well.

    Reply
  8. LoisB
    Posted on February 25, 2012 at 21:48 Permalink

    I’m a graphic design student trying to implement this scroller on my portfolio site. I have all scripts in my root folder and have added links to head and end of body. I put the scroller in a div at the top of my page. Everything works fine other than the scroller is supposed to only scroll horizontal but creeps up and down as it scrolls horizontally.

    Reply
    • LoisB
      Posted on February 26, 2012 at 03:01 Permalink

      Update: I found the only way I could get it to work, is to have all my thumbnails be the same size as the thumbnails in the demo which is 100px tall. There are probably properties in one or more areas of the code I’m guessing to make it work with different thumb heights, but I couldn’t figure out where. Changing “.jThumbnailScroller” didn’t help the creeping up and down as it scrolls horizontally so there must be some other property that needs changed.

      Reply
  9. Helen
    Posted on February 23, 2012 at 18:41 Permalink

    Hi there, I’ve followed your tut and scroller looks good, however, I’m trying to use images that are only 30px high.
    Have tried altering the heights of divs etc but the images seem to float around as there seems to be extra styling being added – what am I doing wrong.
    You can take a look at the floating effect at http://ffrees.freesnetwork.co.uk/home-of-ffrees – this is a work in progress!
    Thank you in advance.

    Reply
  10. Anna Burgess
    Posted on February 17, 2012 at 14:55 Permalink

    I’m not sure if it just me getting this error – it may be a problem with my css

    – I am using the auto scrolling feature and notice on internet explorer 9 all the images scroll across but at the same time they move upwards and disappear completely and then move back down

    has anyone come across this and know of a fix?

    Reply
    • gil
      Posted on August 3, 2012 at 20:14 Permalink

      the problem is that the height of the container is not set, if you set a specific height it will work.

      Reply
  11. Paulo Guilherme Pilo
    Posted on February 14, 2012 at 14:46 Permalink

    Hi, I’m using your plugin jquery-thumbnail-scroller for a project on college and
    I have some issues with.

    I have images with links – 26 at total – in a scroller and a drop-down menu at
    the top of the page and I need that the scroller focus on the webpage open – for example
    I have the video 12 opened and the scroller was on the firs video, what I need is
    the scroller starts in the video 12 – I already try to deslocate the start of the
    scroller tih the “-X px” and it works for thr start bu I can’t return to the video 1
    – the scroller, in fact, starts at the position -300 (for example) and became inaccessible
    for the beginning and explode the end (I have, for example, 300px after the suposed
    and of the scroller) – and changing the numbers at the JS file I can’t do this also (
    focus the start of the scroller on the active video).

    So, is there any solution for that?

    The code I changed was on that part:

    $scrollerPrevButton.click(function(e){ //previous button
    e.preventDefault();
    var posX=$scroller.position().left;
    var diffX=totalWidth+(posX-$this.width());
    var posY=$scroller.position().top;
    var diffY=totalHeight+(posY-$this.height());
    $scrollerNextButton.stop().show(“fast”);
    if(options.scrollerOrientation==”horizontal”){
    if(posX+$this.width() >= 0) {
    $scroller.stop().animate({left:”+=”+$this.width()},options.scrollSpeed,options.scrollEasing,function(){
    if(posX+$this.width() == 0){
    $scrollerPrevButton.stop().hide(“fast”);
    }
    });

    Here a exemple for the problema that I have now:
    http://octopuz.com.br/producao/playlist/playlist.php

    Reply
  12. Szymon
    Posted on February 10, 2012 at 15:56 Permalink

    I was wondering if there any possibility to make move this beautiful scroller in time .
    To move without any action of user?
    cheers

    Reply
  13. oliver
    Posted on February 10, 2012 at 14:57 Permalink

    Hey Malihu,

    great Script! Thanks for sharing.
    I have a question:

    Is it possible to shorten the width of the strip if
    there are not enough pictures for 100% width and/or hide the arrows?

    Example: http://alturl.com/f22ax

    BR
    Oliver

    Reply
  14. Allison
    Posted on February 9, 2012 at 23:51 Permalink

    This is really great, it’s working exactly the way I wanted it to, except for one very important thing… I’m using the clickButtons to scroll through the thumbnail gallery, and linking to PPT presentations on each thumbnail. I can’t for the life of me figure out why I can only scroll through 7 thumbnails… one page should have 8 and the other has 9. I did change the width and height of the scroller to show 3 thumbnails at a time (each 150px wide)… I changed the width to 520px and the height to 160px. Does anyone know what the problem could be?

    Reply
  15. ryan
    Posted on February 9, 2012 at 01:00 Permalink

    Hey Malihu,

    This is a really great plugin. Working really nicely on every browser but the vertical scroll is not working in IE. It still does a horizontal scroll.

    Any ideas why?

    See here: http://bit.ly/gzk3LK (scroll down to the “our collabs” section)

    Reply
  16. Toyce
    Posted on February 9, 2012 at 00:53 Permalink

    Your script is exactly what I needed for a ‘Netflix’-like slider for my media site using clip bucket. I customized the script to work and look exactly how I wanted it on the separate html file, but when I added the code into my clipbucket project, it breaks the page. It’s probably a conflict, and I added your no conflict code, but to no avail. I am not really a programmer, so I am stuck. Any help or advice would be awesome.

    Thanks

    Reply
  17. Darren
    Posted on February 8, 2012 at 19:11 Permalink

    Great plugin sir.

    Is there anyway I can tap into the prevbutton nextbutton events.

    I have a contact emailer in a scrollbox and I need to fire the scrollup event (in js) after the submit button is fired in code behind.

    Reply
  18. kelvin kellman
    Posted on February 6, 2012 at 21:31 Permalink

    Hi how do i install this on my website …i have a bit of html knowledge .

    Reply
  19. Ximbalo
    Posted on February 5, 2012 at 01:32 Permalink

    For those to whom the question of Malihu’s Thumbnail Scroller + PrettyPhoto is still an issue, I have created a fully working version here, that incorporates both jQuery libs, and a FlowPlayer widget as well… on the same page. It has, primarily to do with the order in which the separate js lib files are added to your page code. Also, my implementation is done, as much as possible, with the script loading at code-bottom ( my preference ) as is possible. Best regards… Ximbalo

    Example: internationalk9imports.com

    Reply
  20. itamar
    Posted on January 31, 2012 at 13:39 Permalink

    hi manos
    thank you for a cool slider….i am using the vertical version with some modifications…..please look:
    http://www.tzachiostrovsky.com/ArchitectureAndProcess.asp?item_id=1

    for some reason the slider is loosing it’s focus…i mean the vertical shift is placing the thimbnails wrong…..any advice, anyone, will be highly appreciated
    thanx
    itamar

    Reply
  21. alvinm93
    Posted on January 30, 2012 at 21:04 Permalink

    don’t scroll ??

    Reply
  22. Tim
    Posted on January 23, 2012 at 15:18 Permalink

    Hi Malihu,

    Thanks for posting this script and for all the assists, people like you make the internet great 🙂
    Is there any way to add text beneath each thumbnail that would scroll with them?

    Reply
  23. Ximbalo
    Posted on January 22, 2012 at 03:58 Permalink

    Thank you Malihu for the very nice thumb scroller.
    I will be using it in my upgrade for the client at the included website URL.
    As soon as I present this work to the client, I will be insist that we click on
    “Buy me a Cup of Coffee”, for you part in the source of her new site’s
    functionality. Thanks. 😉 — Ximbalo

    Reply
  24. Corey
    Posted on January 21, 2012 at 20:24 Permalink

    This has already been asked but not answered. On page load, I would like the scroller to automatically scroll to the active item in the list.

    I can calculate the distance that I need the scroller to move, on load, but I cannot figure out the exact line of code to run to reposition the scroller.

    Please help. Thanks

    Reply
  25. Ken Holden
    Posted on January 14, 2012 at 01:09 Permalink

    Mine doesnt seem to scroll at all. Thoughts? Help would be awesome 🙂
    http://69.72.250.115/pdj/#

    Reply
    • malihu
      Posted on January 14, 2012 at 14:07 Permalink

      Hi,
      I think you missed to include jquery-ui-1.8.13.custom.min.js (jquery UI) that handles the easing part of animations.

      Reply
  26. Chris Raymond
    Posted on January 6, 2012 at 18:42 Permalink

    How could this be integrated in such a way that a visitor could click on a thunbnail and open the full-size in a lightbox, such as in a WP site? Is it as simple as using the rel=lightbox syntax, with the link to the larger image?

    Reply
  27. Stefanie
    Posted on December 30, 2011 at 19:08 Permalink

    Hello! I’m trying to implement this on a portfolio webpage and for the most part it is working great. I just have a problem with the top image. All my images are the same width but for some reason whatever image is at the top space in the scroll bar is pushed slightly to the right so the scrolling moves a bit horizontally when you move the scroll bar up and down. Here is a link to the page:

    http://www.lilypaddesignworkshop.com/haymoon/portfolio.html

    Thanks so much for your time and help!

    Reply
  28. Brewster
    Posted on December 21, 2011 at 05:57 Permalink

    There is apparently an issue with webkit returning widths incorrectly. I have no margins or borders on my scroller images, and outerWidth for jTscrollerContainer returns 0. This totally disables the scroller. It works fine in FF, but not for Chrome 16.x and Safari 5.x. I read some posts about the webkit issue, but haven’t found a solution.

    Reply
    • Brewster
      Posted on December 21, 2011 at 07:17 Permalink

      I was using jquery’s document.ready instead of window.onload (as properly documented 😉 the scroller was being initialized before the images loaded. solved.

      Reply
      • Jeroen van Meerendonk
        Posted on August 14, 2012 at 19:23 Permalink

        I can’t thank you enough. I was making the same mistake, and your comment made me find the problem.

        Thank you Brewster, and thank you malihu for the great plugin.

        Reply
  29. Pushpinder Bagga
    Posted on December 19, 2011 at 20:58 Permalink

    B/w – you can try adding paging to comments so to improve this page.

    Reply
  30. Pushpinder Bagga
    Posted on December 19, 2011 at 20:57 Permalink

    Nice script mate. Thanks for sharing as open source. Good luck for the future!

    Reply

Comments pages: 1 4 5 6 7 8 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