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)
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
<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>
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>
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:
"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.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-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.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"
.axis: "y"
– vertical scrolleraxis: "x"
– horizontal scroller (default)axis: "yx"
– vertical and horizontal scroller (useful when panning images or switching axis on-the-fly)
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, setcontentTouchScroll: false
. Integer values define the axis-specific minimum amount required for scrolling momentum (default value is25
).
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
).
advanced:{ autoExpandHorizontalScroll: boolean }
- Auto-expand content horizontally (for
"x"
or"yx"
axis).
If set totrue
(default), content will expand horizontally to accomodate any floated/inline-block elements (such asli
,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, settingupdateOnSelectorChange: "ul li"
will update the scroller each time list-items inside the element are changed. Setting the value totrue
, will update the scroller each time any element is changed. To disable (default) set tofalse
.
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, settingonTotalScrollOffset: 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, settingonTotalScrollBackOffset: 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.
SetalwaysTriggerOffsets: 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.
Setlive: 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, setlive: "off"
and"on"
respectively.
You can also tell the script to disable live option after the first invocation by settinglive: "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
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");
- Element selector
integer
- Number of pixels (from left and/or top)
For example, scroll to 100 pixels:
$(selector).mThumbnailScroller("scrollTo",100);
- Number of pixels (from left and/or top)
[array]
- Different y/x position
For example, scroll to 100 pixels from top and 50 pixels from left:
$(selector).mThumbnailScroller("scrollTo",[100,50]);
- Different y/x position
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 });
- jQuery object
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);
destroy
Usage $(selector).mThumbnailScroller("destroy");
Calling destroy method will completely remove the scroller and return the element to its original state.
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>
creating your own custom theme
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 elementthis.mts.content
– the scrollable element containing the content (e.g. theul
element) as jquery objectthis.mts.top
– content’s top position (pixels)this.mts.left
– content’s left position (pixels)this.mts.topPct
– content vertical scrolling percentagethis.mts.leftPct
– content horizontal scrolling percentagethis.mts.direction
– content’s scrolling direction (returns"x"
or"y"
)
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
Donating helps greatly in developing and updating free software and running this blog 🙂
very nice dude, very simple code for easily understand.
The best version I’ve found here: http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_absolute_position.html
But without some modification it’s still crap in IE. findpos method is not working good on IE. Better (cross-browser) functions are in jquery. Then horizontal placement is something like that: placement_x = $(“#outer_container”).position().left + $(“#outer_container”).offset().left;
Vertical position can be checked in the same way. Findpos is totaly crap.
Afeter my modification (but only relative – not absolut position of container) it is working fine in IE6-IE9, FF, Chrome.
Maybe it will be usefull for somebody. I’ve waste too many hours for that.
I’m sorry malihu, but I have to say that – last one version is totaly crap for IE. Additional easing isn’t good for my CPU 😀 Oldest version is much better for me.
And also demo page is not working correctly in IE7 (vertical flying) Demo 1. What is wrong in this this plugin???
It’s not working in IE7 – everything is flying (!), in IE8 and IE9 number of elements is always (-1), last one element is empty space….. Maybe somebody help ? http://pojezierze.jordan.pl
I’ve copied (Ctrl+C, Ctrl+V) demo1 to my webpage (into my structure). To work, I had to remove jquery noconflict. Now I’ve got another one problem. Content of .jTscroller is flying vertical! Why? When I debug JS, I can see that “top” property of .jTscroller is changing between -5px and 0, why??? It should be 0 all the time. I can’t understand that. Exactly the sam problem without easing. I think – when it is set to to “horizontal” top value shouldn’t be changed.
Ok, now I’ve found last problem reason, .jTscroller was defined percentage (.jTscroller) after changing this to pixels – vertical flying problem is gone.
Additional, height must be the same what .jThumbnailScroller. In other case it’s flying vertical.. I thinh that TOP property shouldn’t be changed in horizontal option.
Another problem, when I call jQuery.noConflict();, datepicker (ui library) crashes, I’m using both and few more jquery plugins on my website.
It seems that the oldest one version (like for Shaun) worked fine (I mean movements), but I don’t like leatest version (all demos). Is it possible to set a new one version to movement’s like for Shaun? It was very good version. In next step I need to change size for moving cursor (like in Mark Sebastian to 2/3 container width), I think it could be possible and better than making first and last margins.
Not very clear but it works for me now, after line 65:
if (mouseCoords 830 ) { mouseCoords = 900; }
where 900 is container width, and 70 (830 = 900 -70) is mouse reaction margin 🙂
I think these params should be params and recalculated from additionals variables.
Unfortiantly the scroller isn’t working anymore, but I don’t understand why it isn’t… Could someone please help me out? I’m looking at my code for ages… Many thanks!
http://staging.unlimitedfashion.nl/product/11/lichtblauwe-jeans
A lot of thanks for the script!
I’ve got a question for you..
Is there a way to scroll a defined amount of pixel in the “clickButtons” mode?
I need to scroll one thumb per click.
Thanks to everyone for any help
I was wonder how to change mouse reaction area. This what I need exactly, is setting plugin to work like Mark Sebastian ThumbnailsNavigationGallery. I was trying myself but without results. Please, help me ..
I realy like this slider! But I have a question, is it possible to place the navigation buttons outside the scroller?
Not without some modifications to the script. The reason is it would “break” other instances of the scroller and you would then need to specify a unique id for each of the buttons for each scroller.
Are you able to provide some basic script to do this?
Nice jquery scroll. thanks for sharing this.
Hi malihu!
Again…great work! But is there a little bug maybe?
If I add more href tags (like 28 or more) the scrolling is no more fluid in IE 8 like chrome…is there a solution??
Hi Malihu,
your script work GREAT !!! Thanks !!!
i’m a novice and i’ve a little problem:
in my Beta web i’ve this script (global.js) in the master page that manage the menu:
$(document).ready(function () {
var b = $(“div#navbar > ul > li”);
$(“div#navbar”).find(“div.drop”).first().css(“left”, “4px”);
var a = null, c = -1, d = function () {
a && a.hide()
};
b.mouseover(function () {
var e = $(this).children(“div.drop”);
c = window.setTimeout(function () {
a && a.hide();
a = e;
e.show()
}, 300)
});
b.mouseout(function () {
window.clearTimeout(c)
});
$(“div#bn”).mouseover(function () {
window.setTimeout(d, 300)
});
$(“div#bc”).mouseover(function () {
window.setTimeout(d, 300)
})
});
when is load the thumbnailScroller recive a jscript error in the 2 row …
Do you have any suggest?
Thanks. Fabio
Hey! Very nice script, i love it!
But, i have a problem with my ajax loader.
If i load the script on the landing page – everything okay!
But, when i load a AJAX Content DIV with the script it doesn’t work! 🙁
I wanna use the vertical-slider with 100% height! 🙁
What’s the reason? 🙁 I doesn’t find the answer…
Hi Matt,
You’d need to add thumbnailScroller function as a callback in your ajax call, so it fires when your data is loaded. For example:
$.ajax({ url: "test.html", success: function(){ $("#selector_id").thumbnailScroller({ ... }); } });
I can’t for the life of me get this to work after an Ajax call. I’m calling it again to as you have there and it’s not working.
Hello,
I’m using this scroller for a website (I used the one shown in “example 2” at the top of the page, with cursor movement), except I’ve replaced the thumbnails with divs containing images and text.
After this modification, the content also scrolls vertically, not just horizontally like I would like it to.
I’m not using any other jquery so I don’t think it’s due to a conflict.
The only modifications I’ve done was in the “jquery.thumbnailScroller.css” file, and it was only minor stuff like taking away the borders, radiuses, background colors, that kind of layout options.
Any ideas how to cancel the vertical scroll due to cursor movement?
I’ll keep looking, but any help would be appreciated, since I’m only a designer and not much of a coder.
Thanks in advance!
Hey again Malihu,
Nevermind my problem, I’ve fixed it…I just had to change .jTscroller’s height from 100% to the pixel height I’m using, and now it works great!
Thanks again for this awesome pluggin, keep up the great work, cheerz!
hi Breece, do you have any idea of how can I click the thumb and instead of an image, I want to open an html (can be an external or a div in my document)
Really appreciate your help
Hi there. Firstly, great work with this!
I developed a website using this scroller to display thumbnails for videos. Currently, there are 16 videos in the scroller and everything works great except for in Firefox. In every other browser I can see all 16 thumbnails and they final one ‘finishes’ at right at the end, as it should. In Firefox, however, I can’t see the 16th thumbnail – it just doesn’t show. There’s a black space though where the thumbnail should be. The weird think is that if I copy the code for the 16th thumb and add it in again (making 17), it works completely fine and I see both of the latest ones.
The 16th video which isn’t appearing is called “Failsafe – Routines”. In Firefox, the last one shown is technically the 15th, “Failsafe – Hope”.
The site can be found at http://www.clingfilm.tv and the scroller is visible immediately on the home page.
Thank you so much, I really hope this can be solved.
I’ve managed to fix this issue after a bit of playing around. With my set up (design of the slider), I just simply can’t have 16 thumbnails – the 16th gets wrapped below in Firefox. I’ve added this code to the j.thumbnailScroller.css file to target Firefox. It’s not ideal having to specify a width of the slider but it works.
/* Firefox width fix */
@-moz-document url-prefix() {
.jThumbnailScroller .jTscroller{position:relative; height:100%; margin:0; left:0; top:0; display:inline-block; *display:inline; width: 5160px;}
}
Thanks.
Absolute life-saver mate – Nice one
Great work, thank you!
Just a question: scrolling is only on one row now, is it possible to have more thano one row scrolling at the same time (same gallery)?
Like this flash site.
Thank you very much!!
I would like to make this Slider interact with another control on the screen. For instance if a user clicked a link (elsewhere on page) that the corresponding picture in the slider gets broght into frame and highlighted (like a mouseover).
I’m guessing there may be a function I can call to make that happen, but dont know enough to figure that out myself… any thoughts?
Really nice thumbnail scroller, we are using it on a new project. Regards
The script is working well on IE, but still bugs on Firefox!
Nice script, but same problem here, the scroll goes up & down. Works fine on a blank page /!\ , would you plz debug me?
Thanx in advance!
Awesome. Worked nearly perfect on my first go thanks for this script man. Two questions I cannot figure out, in FireFox, the last image is dropping down to a new line, so it scrolls left and right a bit, but also up and down to get to the last image.. also in Chrome there is some up and down movement as well. Would really appreciate if you could take a look, thanks.
http://stage.thatryan.com/motion
If anyone was having slight jerking (up & down) when scrolling make sure you specific width & height attributes on your images. This fixed it for me.
Excellent work! Congratulations.
I have one question: is it possible to place two scrollers of the same kind the same page? I tried it without luck. Please help.
Thanks.
Hi, I’m trying to recreate the scolling thumbnail gallery at http://www.lifeandtimes.com and I was wondering if this plug in would facilitate something like that. Any feedback would be greatly appreciated!
Yes you could use it (with some modifications) just for the scrolling of the thumbnails panel.
Brilliant script! I’ve got everything working beautifully now but I do have one nagging concern; the script appears to be incompatible with touch-based OS devices like the iPad, but I believe this could be overcome by adding mouse wheel support. I know that jQuery has an API for the mouse wheel but unfortunately I don’t have the skills to weave that into your code.
Is there a chance you’ll be adding mouse wheel support anytime soon?
Thanks and cheers!
These are some great scripts and integrate well with Scriptaculous, etc. Thanks!
Thank you for the great plugin it is almost exactly what I was looking for. Also thank you for the great support you are giving to everyone with questions.
Me too have a question:
Is it possible to make the thumbnails directly next to each other. A sample of what I mean can be found here http://www.bestofjoomla.com/index2.php?option=com_bestoftemplate&task=demo&no_html=1&id=4216
PS: Is it possible to make this into a module for Joomla 1.5/1.6/1.7
Thanks once again and looking forward to the solution
I am having a similar problem to a previous commenter. My thumbs are wrapping when I use horizontal mode. I increased the height of the container to see it more clearly. When I cut and paste my code into the multi-sample, for example, it works fine. So it has something to do with the CSS I believe. I am also using my own jquery-ui but that doesn’t seem to be the problem. I cannot post a link because my app is a protected system app.
Can you think of anything that would cause the thumbs to wrap rather than making a wider internal div? Some combination in the hierarchy of position statements perhaps?
Check for any unwanted tags in your html (e.g. br – see above comment) and make sure all anchors inside jTscroller are displayed as inline-block.
Hi there!
Been looking for something like that for a time now, thanks!
Something weird is going on, however: I’m loading the horizontal scroller, but somehow thumbs are aligned vertically!
Have a look: http://www.clubmadrid.org/2011conference/?page_id=183
May it be that the scroller is having a conflict with Lightbox?
Many thanks! If I can make it work I will surely buy you a coffee! :p
Hello Raul,
Seems there’s an unwanted br below every anchor in the scroller, resulting each anchor (containing image) to appear below the previous one (goes on a new line). If you remove those line breaks it should be ok.
Gosh, what a dumb question! I was editing it in WordPress so I didn’t see the br tags, but each thumb was on a separate line.
Many thanks for your help!! I owe you a coffee!