jQuery thumbnail scroller
Changelog
- Aug 5, 2015
- Updated plugin to version 2.0.3
- Fixed issue: https://github.com/malihu/thumbnail-scroller/issues/5 regarding Chrome browser on Android.
- Minor optimizations on auto-update function.
- Apr 2, 2015
- Updated plugin to version 2.0.2
- Fixed a bug that prevented onInit callback triggering on elements that didn’t require scrolling.
- Dec 3, 2014
- Updated plugin to version 2.0.1
- Updated/fixed various script private functions.
- Oct 17, 2014
- Updated plugin to version 2.0.0
- Plugin script completely re-written to support multiple selector types, option parameters and methods.
- Removed jQuery UI dependency (plugin does not require jQuery UI anymore).
- Extended scroller types and related options (speed, axis etc.).
- Optimized all js animation tweens for better performance.
- Added support for touch-enabled devices.
- Added some advanced parameters for auto-updating the scroller on element and content resize (fixed all related issues).
- Added user defined custom callback functions.
- Added the following methods: update, scrollTo, stop, disable, destroy
- Plugin license changed from GPL/L-GPL to MIT.
- Oct 8, 2011
- Changed anchors css display property to block and added float:left; (instead of display:inline-block;) to avoid extra whitespace between thumbnails.
- May 30, 2011
- Plugin is greatly upgraded by the addition of new features and updated to be conflict-proof with other js libraries and scripts by changing css class names, thumbnailScroller function calling, jquery.thumbnailScroller.js and by adding
jQuery.noConflict();. - Added 2 more scrolling types (3 total): an additional scrolling via mouse movement and a new scrolling type via next/previous buttons. The 3 types of scroller are: “hoverPrecise”, “hoverAccelerate” and “clickButtons”.
- Added auto-scrolling feature.
- Plugin is greatly upgraded by the addition of new features and updated to be conflict-proof with other js libraries and scripts by changing css class names, thumbnailScroller function calling, jquery.thumbnailScroller.js and by adding
- Feb 23, 2011
- Automatically setting content width for horizontal scrollers is no longer calculated via javascript. Instead of using jQuery .each() or for statements, the width is now set by adding an additional div (.horWrapper) that wraps content and by setting the display of .container div to inline, thus expanding its width automatically (check the updated css file for details).
- Jan 1, 2011
- Modified the plugin to scroll images with different widths horizontally.
- Nov 29, 2010
- Created a plugin out of the original script for easy implementation, configuration and multiple scrollers on a single page.
- Minor code fixes and enhancements.
- Nov 26, 2010
- Fixed an issue with the vetical fixed-size scroller (scroller didn’t get the correct offset value). The solution was pointed by Peter Ambroz.
- Oct 18, 2010
- Brad Mace added some code to increase the left and right margins of the thumbnail scroller in order to be easier to get the first and last thumbnails all the way on the screen, without having to move the mouse to the very edge. Script updated 🙂 thanks Brad!
Plugin home
Great code!
Hello,
there seems to be a problem with jQuery v3.6.0
When page is loaded, I get e.typeof is undefined.
The workaround that was to install the following:
Is there any plans to upgrade the jQuery thumbnail scroller to fully support jQuery v3.6.0 and above ?
hi
i was searching a vertical scroller and got your code. thanks a lot.
i have one question. how can i show content/text on right side when i click on the thumbnail. is it possible?
Hi, Nice & Informative article. Web designing company in Hyderabad is one of the best practices nowadays most of the organizations from startup to big brands are using. It’s very helpful in showcasing our business to the right person in right time. Very nice article. Found informative for me.
Hi… Thank you so much for your plugin. You have no idea how you’ve saved me. It works great. But I was wondering… is it possible to also make the thumbnails scroll by using the mouse-wheel, that is, in addition to the hovering over the edges??
Kind regards,
Carla.
Hey Guys!
Any idea how to implement this in a Shopify store? I know I have to add the jv and css files in the assets but what should I do next?
Please help
Why I can’t load data if my data more than 21 data from database ?
Trying to figure out how to change the scroll speed. Integer and ‘scrollSpeed’ do not work for me. Any ideas? I am changing it in jquery.thumbnailScroller.js file. Thanks in advance.
It’s 2018 btw, not sure what changes have been made in the last couple years to warrant any code not working.
how can do that slider will auto-scroll
Harsh Prajapati
Can we stop scrolling on mouse click or hover wherever we need.
Hi,
Great plugin,Working perfectley ,
Is it possible to add multi[le scrolling methord for a single id.
like both click and hover
$(“#my-thumbs-list”).mThumbnailScroller({
axis:”y” ,//change to “y” for vertical scroller,
type:”hover-50″,
contentTouchScroll :50
});
$(“#my-thumbs-list”).mThumbnailScroller({
axis:”y” ,//change to “y” for vertical scroller,
type:”click-50″,
});
.mTS_horizontal .mTSContainer { margin-left: auto !important; margin-right: auto !important; }Malihu, thank you for such a great js plugin!
I have only a small issue: can’t center thumbnails if their overall width is less than of the container. So they are aligned to the left.
If I’m not blind (don’t see in config section) and such feature is not implemented in this version of the plugin, I’m requesting such feature in new releases! 🙂
Yes, this can be achived with callbacks-counting-offset, but it becomes complicated.
What do You think, Malihu?
Old comment I know, but wanted the same thing. Simply css your img to be display:block and margin:auto.
img {
display: block;
margin: auto;
}
hi Thanks for this great Job!
I want to scroll a grid box of 15 list items and display 9 list items first and 6 list item… when scroll is activated.
Can u help me please
EXcellent posts..
sap netweaver training in hyderabad
Hi this is a great script for me. please could you explain how I can get this to work on desktop using hover and same time on Mobile using touch
The plugin works with regular mouse and touch (you don’t have to do anything). In touch devices you just touch swipe thumbnails. Do you have a particular issue with a device?
The scroller goes on infinite scroll on touch devices. It won’t stop at the end of the list but keep on scrolling white no any elements inside, just white background.
Hi!
Great plugin!
Have a question about optimalization. When I use a multilevel thumbnails grid to move entire website from left to right there is a problem with smothness. There’s little of shaking. When I use 32gb ram, i7 pc its works fine but in regular pc’s there is a problem with that. Have any suggestion?:)
Regards,
Alek
If wanted to initially scroll to the middle of thumbnail (or other) content, how would i do that? element.scrollLeft(n) doesnt seem to work and seems to be overwritten?
My div is 5000 px wide and i want to initially show it @ 2500 px.
Hi, thanks for this great script.
But I have a question: Is it possible, that the images are continuing scrolling while holding down the mouse button over the arrows instead of clicking the button?
Hi,
Using mousedown/up events can be a bit tricky with touch devices but I have a working example here:
http://manos.malihu.gr/repository/jquery-thumbnail-scroller/demo/examples/mousedown-buttons-test.html
View the source and adapt the code to your needs. The code that does the trick is the last script tag (right before the closing body tag). Hope this helps 🙂
Hi,
how to turn on infinitve scrolling?
Hi,
Infinite scrolling is not part of plugin’s core so there’s no single option to enable it automatically.
You can do it using few lines of extra code within the callback options. See the working example below:
http://manos.malihu.gr/repository/jquery-thumbnail-scroller/tests/examples/carousel-test.html
Note that such functionality will only work with scroller buttons and not with hover.
Excellent plugin. It works well. I used it to implement horizontal scrolling playlist for JWPlayer 7. See screenshot: http://pakjiddat.com/wp-content/uploads/2016/02/jwplayer-integration-750×410.png.
Thanks for your plugin.
Regards,
Nadir Latif