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

Pages: 1 2 3


740 Comments

Post a comment

Comments pages: 1 2 3 14

  1. Seaduction
    Posted on January 19, 2011 at 10:01 Permalink

    Hi,

    Any idea why opacity and animspeed aren’t working?

    Many thanks!

    Reply
    • Renan Cammarosano
      Posted on March 28, 2011 at 07:25 Permalink

      I had the same problem here with the opacity, then I saw that I forgot to put the “class=”thumb” in the IMGs tags.

      Reply
  2. Mike
    Posted on January 19, 2011 at 06:18 Permalink

    Fantastic script! any way to integrate it with a lightbox script?

    Reply
    • malihu
      Posted on January 19, 2011 at 09:48 Permalink

      Lightbox plugins such as Lightbox 2 and Lightbox JS can be integrated easily by including the necessary .js files (e.g. lightbox.js) and adding a rel="lightbox" attribute to image links.

      Reply
    • malihu
      Posted on January 28, 2011 at 14:32 Permalink

      Check Seaduction’s url below for lightbox implementation.

      Reply
  3. Арт-кафе Буфф
    Posted on January 17, 2011 at 20:47 Permalink

    Hi! My question is: how to tie the scroll bar or the dot denoting the scroll position?
    Example: http://s012.radikal.ru/i320/1101/d9/692498bcdd7f.jpg

    Reply
  4. feng
    Posted on January 11, 2011 at 05:30 Permalink

    hi, great work. it’s been very helpful. just one suggestion: I think there’s a minor oversight in the instruction for multiple scrollers (given at the very end of your post)? by giving each scroller a unique id, one will also need to update the css file because the styles are assigned only to the element with the original id.

    Reply
    • malihu
      Posted on January 11, 2011 at 13:35 Permalink

      You’re right! Thanks a lot for noticing it feng. I’ll update the post asap.

      Reply
  5. shaun
    Posted on January 4, 2011 at 06:57 Permalink

    another stunning gem of a script. love everything you’ve posted!

    i’ve added this to an Indexhibit gallery plugin to wonderful effect. however, there seems to be an issue regarding how much horizontal space there is to scroll when loading across several pages.

    to clarify: the test page i made works splendidly (http://www.leslierosen.com/test-scroller/), but other pages generated with the exact same plugin show either too much space to the right (http://www.leslierosen.com/fire/photos/) or don’t scroll at all (http://www.leslierosen.com/circus/photos/ which trims two thumbnails entirely)…

    i thought maybe there was some kind of caching issue happening, but when i made a second test page, it worked without a problem. so i re-created one of the other pages from scratch, but encountered the same problem as before. i am befuddled!

    Reply
    • malihu
      Posted on January 4, 2011 at 12:47 Permalink

      Hi shaun,
      I think the problem is that your thumbnails have different widths. Let me work a bit on the script so it can work with multiple thumbnail sizes. I’ll get back to you shortly.

      Reply
    • malihu
      Posted on January 4, 2011 at 16:00 Permalink

      shaun, please download this modified script:
      http://manos.malihu.gr/tuts/jquery.thumbnailScroller.zip
      It works with multiple different thumbnail sizes. Let me know the result 🙂

      Reply
    • malihu
      Posted on January 5, 2011 at 03:44 Permalink

      shaun, re-download the file (http://manos.malihu.gr/tuts/jquery.thumbnailScroller.zip) as I modified it a bit.

      I tested the script on opera, chrome and safari and it worked well. When I saw your new comment, I checked it on all browsers and I found that on firefox and ie there was an issue with the total width of thumbnails container. I did a minor change in the script and I think it works as it should. Check it and let me know.

      Reply
      • shaun
        Posted on January 5, 2011 at 03:54 Permalink

        you, sir, are my hero. it’s perfect on every page!

        expect another cup of that delicious paypal brand coffee!

        Reply
      • malihu
        Posted on January 5, 2011 at 10:54 Permalink

        Cheers 😀

        Reply
      • Lisa
        Posted on August 4, 2011 at 19:26 Permalink

        This helped me as well! Thanks so much for this beautiful script!

        Reply
  6. Brett Widmann
    Posted on January 1, 2011 at 04:01 Permalink

    I really like this type of gallery style scroll! It all works wonderfully.

    Reply
  7. Pierre
    Posted on December 31, 2010 at 18:34 Permalink

    Thank you, a great Script, gooood work

    Reply
  8. Vinícius Almeida
    Posted on December 27, 2010 at 16:33 Permalink

    Awesome!

    Tnks!

    Reply
  9. malihu
    Posted on December 27, 2010 at 12:21 Permalink

    @oky dok

    Hello,
    If you could give me a link of your page I would be able to help you. I think your problem might be the way you load the plugin but I can’t really tell unless I see the code.

    Reply
    • oky dok
      Posted on December 27, 2010 at 13:51 Permalink

      I fixed it….it had to do with the css and this line:

      #tsv_container .thumbScroller .content div{padding: 3px; height:100%;}

      I changed the height to a smaller number, as it seems 100% was making the distance between the thumbs too large and thereby out of site off the page…shrinking the value made the gap closer and i could see them all.

      I have a new issue though……How do i load my page with my working thumbnails successfully into a div on another page, and have all the code work? Currently, when I try to load it, the javascript animation easing and fade effects dont work when i load this page into a div. How can i fix this? Please provide example code if possible.

      Thanks

      Reply
      • malihu
        Posted on December 27, 2010 at 14:56 Permalink

        Instead of calling the thumbnail scroller function when the page loads (as shown on the demo) you should call it after ajax data is loaded. When you successfully complete an ajax request, run:
        ThumbnailScroller(“tsh_container”,”horizontal”,30,800,”easeOutCirc”,0.5,300);

        Reply
  10. Artist
    Posted on December 19, 2010 at 00:07 Permalink

    Is there a reason it does not work on IE6?

    Reply
    • malihu
      Posted on December 19, 2010 at 05:18 Permalink

      Hi,
      The reason is that I do not support or check any of the scripts, plugins etc. on IE6 and I wouldn’t be surprised if most stuff here don’t really work on such browsers.

      Reply
      • Gino
        Posted on December 19, 2010 at 11:48 Permalink

        Hi ya ….i love the scroller…
        i just would love to know if there is a way to make it work with PrettyPhoto Lghtbox script…..
        the fact that the list of Thumbs is made with divs instead of li it gives me problem….anyone tried it?

        Thanks.

        Reply
      • oky dok
        Posted on December 27, 2010 at 12:01 Permalink

        Ive put the vertical scroller into one of my divs that is 100px wide, and the images are 50px height… I can only get the 1st image to show in the scroller when i preview in the browser, though im able to see them in dreamweaver. Any idea what im doing wrong?

        Reply
  11. Yotam
    Posted on December 15, 2010 at 15:15 Permalink

    First of, this is a really cool plugin. very smooth and elegant. i love it.
    Second, why didn’t you make it a ‘real’ jquery plugin?
    all you had to do is change the method to fit the jquery API, like this:
    $.fn.thumbnailScroller = function (tsType,tsMargin,scrollEasing,scrollEasingType,thumbnailOpacity,thumbnailFadeSpeed){ id = $(this).attr('id');

    Reply
    • malihu
      Posted on December 15, 2010 at 15:40 Permalink

      Thanks for noticing, I will.

      Reply
  12. Yentrof
    Posted on December 5, 2010 at 19:48 Permalink

    This is very cool… it’s like you read my mind! Thank you!

    Reply
    • CYRIL
      Posted on December 7, 2010 at 01:59 Permalink

      Pretty cool but how do you integrate it in WP ? because WP use it’s own JQUERY now !!!

      I try the following code in my head section but it doesn’t work ??? Any idea why ? :

      jQuery(window).load(function() {

      jQuery(‘#tsvf_container’).ThumbnailScroller(“tsvf_container”,”vertical”,10,0,”easeOutCirc”,0.2,600);

      });

      Reply
  13. Manuel Wehlte
    Posted on December 1, 2010 at 07:46 Permalink

    Thats really great scroller! Thanks, it is exactly what I do need.

    Reply
  14. Olli
    Posted on November 30, 2010 at 09:56 Permalink

    Thank you so much 🙂 Now the script works inside an absolutely positioned element!

    Reply
  15. PeteFriday
    Posted on November 29, 2010 at 22:55 Permalink

    @ Malihu,

    totally agree on that! !!

    Reply
  16. Filip
    Posted on November 27, 2010 at 15:58 Permalink

    Hi Man, great work! That’s exactly what I needed. Is there any simple possibility put more vertical scrollers on one site?

    Reply
    • malihu
      Posted on November 27, 2010 at 16:03 Permalink

      Right now you only can do it manualy. I’ll try to find some time to create a plugin from this script and make it easier to implement 😉

      Edit: done!

      Reply
      • Filip
        Posted on November 27, 2010 at 17:05 Permalink

        Thanks a lot. So far I’ll try to do it with renaming of divs.

        Reply
    • malihu
      Posted on November 29, 2010 at 03:41 Permalink

      I’ve created a plugin out of the script Filip. You can put multiple scrollers and configure each one easily. Download the updated files and check the post on how to use it 🙂

      Reply
  17. Pete Friday
    Posted on November 25, 2010 at 15:30 Permalink

    Hiya,

    first of, thanks a zillion for putting in this effort in giving us all this beautifull scripts! Not ment to suck up, but that is my hounest opinion.

    Oke now my problem, i’m using the thumbnail scroller for about 40 thumbs, with a height of 94 and a width of 100 pixels. The space i’ve implemented it in has a height of 396 pixels so is set the height of the container also to 396 pixels.
    Now the scrolling does’nt work as it should… when you hover over it with the mouse, towards the bottom, it scrolls way beyond the last thumbnail. Also the top thumbnail can’t be reached anymore.
    Has this to do with the height of al the thumbnails or something?

    I really could use your help verry much!

    Thanks in advance!

    Reply
    • malihu
      Posted on November 26, 2010 at 00:55 Permalink

      Hello Pete and thank you for your comments 🙂
      Can you post a link with your implementation so I can check it out?

      Reply
      • PeteFriday
        Posted on November 26, 2010 at 20:13 Permalink

        Thanks Malihu for the reply!

        Sorry but that’s not (yet) possible now, but Oli subscribed the problem perfectly, altho i want to use the vertical one!

        Thanks a lot for the help dudes!

        Reply
    • Olli
      Posted on November 26, 2010 at 12:23 Permalink

      I have a similar problem: If I place a fixed size horizontal scroller inside a div, which has been positioned absolutely, on mouseover the “band of images” jumps to the left the same amount of pixels that the div has for left-property in css. So the “centering” for the images goes somehow crazy if the #outer_container is inside another element. On page refresh the centering is ok, but as soon as mouseover happens, the centering does not work properly: I cannot get to the first image anymore, and there’s an empty space in the end of the images.

      Reply
    • malihu
      Posted on November 27, 2010 at 11:45 Permalink

      Pete, I’ve changed a bit the code for the Fixed size-vertical scroller.
      Please re-downoad the file and get the new code to check the problem is solved.

      Reply
      • PeteFriday
        Posted on November 27, 2010 at 21:20 Permalink

        Malihu…. Fantastic!
        Thanks so much for the time you’ve spend to fix this! It works like a charm now!
        I did find a second problem… Freaking iPads!
        The scroll does’nt work on these shitty machines.
        When you use your finger to slide down the webpage “sticks” on your finger…
        First when building a website you had to watch out for cross-browser problems, that problem is almost as good as gone and now there’s this freaking iPad which hase to be taken in acount for…

        Thanks a lot!

        greets,

        Pete

        Reply
      • malihu
        Posted on November 29, 2010 at 03:58 Permalink

        You welcome Pete 🙂 I’ve created a plugin out of the script (check the post) so you can download the updated files if you like.

        About iPads etc.: In my opinion a product should comply with web technologies and standards (especially ones that exist since the Internet itself) and not the other way around.

        Reply
  18. ronald
    Posted on November 20, 2010 at 05:04 Permalink

    hola buena que tal tuto exelente scroll de tumbs …. gracias por compartirlo…=)

    Reply
  19. Gman
    Posted on November 18, 2010 at 01:28 Permalink

    I love this script! one question though.

    I am using this to show a bunch of logos with different widths. When i go to my page all the images are stacked but when I refresh everything is fine and it works like it should.

    Would you know why it only works after I refresh?

    Reply
    • malihu
      Posted on November 18, 2010 at 10:15 Permalink

      Does this happen on all browsers? Can you post a link?

      Reply
      • Joe D
        Posted on April 5, 2011 at 00:58 Permalink

        Hey, I appreciate you responding to everyone’s questions in comments, I think thats great.

        I am having the same trouble as GMan where the images stack up until the page is refreshed. It seems to be something to do with needing the images to be cached. Have any suggestions?

        Here is a link to the site:
        http://archives.josephdonnelly.com/jocelyngoldstein/

        Reply
      • malihu
        Posted on April 13, 2011 at 10:02 Permalink

        @Gman @Joe D

        The easiest way to fix all those issues is to use an extra plugin that checks when an element resizes and call ThumbnailScroller function. The plugin’s url is:
        http://benalman.com/projects/jquery-resize-plugin/
        Implement the plugin on your document and then use it like:
        $(".content").resize(function(e){ ThumbnailScroller('tshf_container', 'horizontal', 15, 2300, 'easeOutQuad', 1); });

        This is the most efficient way to update scroller simply because every user has different scripts/ways for initial loading and updating scroller content.

        Reply
  20. Numair Fakhar
    Posted on November 13, 2010 at 16:44 Permalink

    Thats great , just wana know , how to make it auto scroll …

    Reply
    • malihu
      Posted on November 14, 2010 at 19:16 Permalink

      Auto-scrolling is a completely different script imo. This script is based entirely on mouse interaction. Maybe you could just try to animate .container div ($thumbScroller_container.stop().animate()) based on its dimensions when mouse is off the thumbscroller.

      Reply
  21. Giovanna
    Posted on October 26, 2010 at 03:09 Permalink

    HI,
    This is a great script you posted, thank you so much.
    Is there a way to slow down the speed of the scroll?

    Thank you!

    Reply
    • malihu
      Posted on October 26, 2010 at 09:44 Permalink

      Hello!
      The scrolling speed is set by the movement/position of the cursor over the thumbnails. What you can change is the ease amount of the animation by changing the value of animSpeed variable (in this demo: var animSpeed=600;). Thanks

      Reply
  22. Carl Mumford
    Posted on October 11, 2010 at 14:22 Permalink

    That’s really useful. Thank you, I’m going to incorporate it into a friend’s photography blog now.

    Reply
  23. Jio
    Posted on September 30, 2010 at 14:38 Permalink

    How do I implement this in my site? 😀 Great work btw!

    Reply
    • malihu
      Posted on September 30, 2010 at 14:59 Permalink

      You can check the source code from the demos. I’ll post the code properly as soon as possible. Thanks!

      Edit: Done!

      Reply
      • Xavier Paredes
        Posted on October 23, 2010 at 22:09 Permalink

        Dear malihu,

        Your thumbnail scroll is awesome. I currently have a website that I need to start development on asap (design phase is done) and am wondering if you do web development. Or if you do consulting.

        Great work!
        Xavier

        Reply
      • malihu
        Posted on October 24, 2010 at 05:10 Permalink

        @Xavier
        Yes I do. Drop me an e-mail whenever you want. Thanks!

        Reply
  24. Brício
    Posted on September 21, 2010 at 21:52 Permalink

    Hello from Brazil friend, your blog is very important to me, I’ll always be waiting for new material in jquery

    Reply
    • malihu
      Posted on September 23, 2010 at 01:11 Permalink

      Thanks Bricio! I try to post interesting jquery stuff as frequently as I can.

      Reply
      • saurabh
        Posted on September 27, 2010 at 14:06 Permalink

        hey thanks. this is what i need. gud work. can u please help me again.
        open this site click on portfolio(guys) what i need is when u click on the image below see the effect and also when u clicked on second photo the effect is with white background. i need this in jquery. Can u please help me.
        Thanks

        Reply
  25. Marcia Regina Nunes
    Posted on September 6, 2010 at 09:38 Permalink

    This is very, very useful for me now!! Tanks 😀

    Reply
  26. Erd
    Posted on August 11, 2010 at 16:20 Permalink

    Paylaşımlar güzelleşiyor paylaştıkça:)

    Reply
  27. Susheel
    Posted on August 11, 2010 at 07:50 Permalink

    Very Good Scroller!! Grate Work

    Reply
  28. e11world
    Posted on August 6, 2010 at 21:13 Permalink

    Nice script! This is very useful for me!!

    Reply
  29. Studentenjob
    Posted on August 2, 2010 at 22:59 Permalink

    Very nice scroller. Thanks for sharing this nice idea 🙂

    Reply
  30. Ivo
    Posted on July 30, 2010 at 16:13 Permalink

    This is absolutely delightful! It’s exactly what I need and I just LOVE it! 🙂
    I’ve just seen some of your other posts and they are quite beautiful. Keep up the good work. 🙂

    Reply

Comments pages: 1 2 3 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