A cool jquery/css thumbnail scroller plugin inspired by the ones made in Flash. It works by cursor movement or next/previous buttons, has auto-scrolling feature and it’s simple to configure and easy to style through css.
DEMO 1 DEMO 2 DEMO 3 DEMO 4 DEMO 5 DOWNLOAD
Changelog
08/10/2011
- Changed anchors css display property to block and added float:left; (instead of display:inline-block;) to avoid extra whitespace between thumbnails.
30/5/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.
23/2/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).
30/1/2011
- Modified the plugin to scroll horizontally, images with different widths.
29/11/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.
26/11/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. Demo and download files are updated.
18/10/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!
How to use it
In order to implement the plugin, you first need to insert inside the head tag of your document the jquery.min.js (load it from Google CDN), the jquery-ui-1.8.13.custom.min.js (a custom build jQuery UI for custom animation easing) and the jquery.thumbnailScroller.css which is the file where you can style your scroller(s).
<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="jquery-ui-1.8.13.custom.min.js"></script>
Next you’ll need to insert the markup of the thumbnail scroller with your images and links inside the body tag. The structure of the markup is exactly the same for every scroller instance. You can use class names e.g. .jThumbnailScroller or you can add a unique id for using multiple, different type scrollers on the same page.
<div id="tS2" class="jThumbnailScroller"> <div class="jTscrollerContainer"> <div class="jTscroller"> <a href="#"><img src="thumbs/img1.jpg" /></a> <a href="#"><img src="thumbs/img2.jpg" /></a> <a href="#"><img src="thumbs/img3.jpg" /></a> <a href="#"><img src="thumbs/img4.jpg" /></a> <a href="#"><img src="thumbs/img5.jpg" /></a> </div> </div> <a href="#" class="jTscrollerPrevButton"></a> <a href="#" class="jTscrollerNextButton"></a> </div>
The final step is to include the actual thumbnail scroller plugin (jquery.thumbnailScroller.js) and the function that calls and configures the scroller(s) at the end of your document, just before the closing body tag. We also add jQuery.noConflict(); for using the plugin along with other libraries (e.g. prototype, scriptaculous etc.). thumbnailScroller function selector can be id, class, tag name etc. (in this example the id of the .jThumbnailScroller div in the markup above).
<script>
jQuery.noConflict();
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
<script src="jquery.thumbnailScroller.js"></script>
You can configure each scroller by setting the parameters of the function call as options:
- scrollerType
scroller type based on mouse interaction
values: “hoverPrecise”, “hoverAccelerate”, “clickButtons”
default: “hoverPrecise” - scrollerOrientation
values: “horizontal”, “vertical”
default: “horizontal” - scrollEasing
scroll easing type only for “hoverPrecise” scrollers
available values here: http://jqueryui.com/demos/effect/easing.html
default: “easeOutCirc” - scrollEasingAmount
scroll easing amount only for “hoverPrecise” and “clickButtons” scrollers (0 for no easing)
values: milliseconds
default: 800 - acceleration
acceleration value only for “hoverAccelerate” scrollers
values: integer
default: 2 - scrollSpeed
scrolling speed only for “clickButtons” scrollers
values: milliseconds
default: 600 - noScrollCenterSpace
scroller null scrolling area only for “hoverAccelerate” scrollers
0 being the absolute center of the scroller
values: pixels
default: 0 - autoScrolling
initial auto-scrolling
0 equals no auto-scrolling
values: amount of auto-scrolling loops (integer)
default: 0 - autoScrollingSpeed
initial auto-scrolling speed
values: milliseconds
default: 8000 - autoScrollingEasing
initial auto-scrolling easing type
available values here: http://jqueryui.com/demos/effect/easing.html
default: “easeInOutQuad” - autoScrollingDelay
initial auto-scrolling delay for each loop
values: milliseconds
default: 2500
To set multiple scrollers with different style and features on a single page, give them a unique id and add a function call for each one. For example:
<script>
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"clickButtons",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
$("#tS3").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"vertical",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:800,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
You can style all and each scroller separately in jquery.thumbnailScroller.css.
Scrolling long content
There’s a bug in jquery.min.js that resets to 0, an animate value greater than 9999 pixels. This bug will affect the scroller if content width or height is equal or greater than 10000 pixels, resulting a scrolling jerk. This annoying bug is going to be fixed on a future release of the library. Until then, we need to come up with a temporary solution and since editing jquery.min.js is not the best of practices, we’ll overwrite the jquery function containing the buggy code 
Insert the following code below the window load function:
<script>
/* function to fix the -10000 pixel limit of jquery.animate */
$.fx.prototype.cur = function(){
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
return this.elem[ this.prop ];
}
var r = parseFloat( jQuery.css( this.elem, this.prop ) );
return typeof r == 'undefined' ? 0 : r;
}
</script>
What you can do with it? You could implement it on things like this (see post) or this. Have fun and feel free to change it as you like.
If you wanna support updating and creating more scripts or if you just feel like it, you can donate by buying me a coffee
The image thumbnails used in the demo are the work of Alex Varanese (http://www.alexvaranese.com).
318 Comments
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.
Thanks Ivo, glad it helped
Hi dude… its a great plugin… just a question.. can i integrate it with the round border image??? i want implement it but with round border images… tyvm.. and congratulations for this plugin…
Can’t see why not.
Hi there,
great script!
I use tshf_container, but when I use some pictures with different width, the first image seems to be influent for the scrolling. If this first image is close, i cannot to to the last images, on the right (). If the the first image is large, the cursor go quickly in a “blank space”, but you can see all the pics (). the size of all the images is necessary with the same width ? Maybe you can help me…
Thx
Very nice scroller. Thanks for sharing this nice idea
Nice script! This is very useful for me!!
Very Good Scroller!! Grate Work
Paylaşımlar güzelleşiyor paylaştıkça:)
This is very, very useful for me now!! Tanks
Hello from Brazil friend, your blog is very important to me, I’ll always be waiting for new material in jquery
Thanks Bricio! I try to post interesting jquery stuff as frequently as I can.
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
How do I implement this in my site?
Great work btw!
You can check the source code from the demos. I’ll post the code properly as soon as possible. Thanks!
Edit: Done!
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
@Xavier
Yes I do. Drop me an e-mail whenever you want. Thanks!
That’s really useful. Thank you, I’m going to incorporate it into a friend’s photography blog now.
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!
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
Thats great , just wana know , how to make it auto scroll …
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.
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?
Does this happen on all browsers? Can you post a link?
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/
@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.
hola buena que tal tuto exelente scroll de tumbs …. gracias por compartirlo…=)
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!
Hello Pete and thank you for your comments
Can you post a link with your implementation so I can check it out?
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!
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.
Hello Olli,
Please check a modified script here:
http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_absolute_position.html
View source to get the new code and let me know if problem is solved.
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.
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
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.
Hi Man, great work! That’s exactly what I needed. Is there any simple possibility put more vertical scrollers on one site?
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!
Thanks a lot. So far I’ll try to do it with renaming of divs.
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
@ Malihu,
totally agree on that! !!
Thank you so much
Now the script works inside an absolutely positioned element!
Thats really great scroller! Thanks, it is exactly what I do need.
This is very cool… it’s like you read my mind! Thank you!
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);
});
Hello CYRIL,
I’m not really into WP development but please check this:
http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/
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');
Thanks for noticing, I will.
Is there a reason it does not work on IE6?
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.
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.
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?
@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.
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
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);
Awesome!
Tnks!
Thank you, a great Script, gooood work
I really like this type of gallery style scroll! It all works wonderfully.
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!
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.
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
first may i say that you are a scholar and a gentleman for your persistent assistance throughout these threads!
that change made things a little better, but not quite 100%. http://www.leslierosen.com/circus/photos/ still loses it’s last thumb while http://www.leslierosen.com/fire/photos/ still has too much room.
and yet http://www.leslierosen.com/test-scroller/ still works like a charm, even though the thumbs are all different sizes–even when i add/remove items!
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.
you, sir, are my hero. it’s perfect on every page!
expect another cup of that delicious paypal brand coffee!
Cheers
This helped me as well! Thanks so much for this beautiful script!
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.
You’re right! Thanks a lot for noticing it feng. I’ll update the post asap.
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
Fantastic script! any way to integrate it with a lightbox script?
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.Check Seaduction’s url below for lightbox implementation.
Hi,
Any idea why opacity and animspeed aren’t working?
Many thanks!
I had the same problem here with the opacity, then I saw that I forgot to put the “class=”thumb” in the IMGs tags.
Love the thing, but no matter what I do, if the content images have variable widths, it seems that something is taking the largest width and applying that to each .content item (which some are half the width of the largest. Therefore, when I mouse to the right of the screen (either with fixed width horizontal or full) I have a large blank area and the items scroll out of sight.
I have calculated and put sizes in the css and even each individual img, alternately to the .content class, alternately to the container.
Yes, you’re right. For the horizontal scroller to work, you need to have equal width images. The reason css width doesn’t work, is because the plugin calculates and sets the total width of the container changing the initial css value.
I’m trying to find some time to modify the script to accept images with various widths. In the meanwhile, you can download this:
http://manos.malihu.gr/tuts/jquery.thumbnailScroller.zip
which is a modified version of the plugin I did for another user (shaun) that pretty much does the trick.
Edit: Plugin updated to scroll images with different widths
Thanks! So far, so good.
I have the same trouble of Smayton.
Thx Malibu, the version of jquery.thumbnailScroller.js for Shaun works perfectly.
All the best…
your work is amazing so thank you. I work with shadowbox plugin alot and i was wondering if you knew how to implement it as traditional methods are not working. Thanks
Hi Ryan,
Shadowbox requires just a rel attribute on the thumbnail if I recall correctly. There should not be any problems since lightbox plugins usually do not interfere with other scripts. Can you post a link so I can check it further?
Thanks very much got it sorted, i was missing out a tiny bit of code but now all sorted. Cheers
Hi all,
If someone could write how to change the width and height of the container to accomodate for smaller thumbs (eg 100X70 px.), I would be very grateful.
Thanks for a great gallery plugin.
Hello,
Everything you need to change is in jquery.thumbnailScroller.css.
For instance, if you want your thumbnails to have 15px top and bottom padding and 70px height, you should set:
#ts_container .thumbScroller, #ts_container .thumbScroller .container, #ts_container .thumbScroller .content{height:100px;}Hello does anyone have a clue on how to set a grid of thumbnails (with grow hover effect) and movement only on the column or row you selected?
any sugestion on other jquery scripts?
Thanks and congrats for this fantastic script
Got it in the multiple scrollers demo
Is it possible to add some infinite scroll effect?
Infinite scroll? Can you describe its functionality?
On a row with 5 thumbnails when I hover to the fifth thumbnail the next thumbnail would be the first one, it would be more like a cycle
Not possible the way the plugin works. It would be a totally different script (more like slideshow than a scroller).
Hello! Fantastic scroller. Much appreciation for your hard work in putting it together.
Is there a way to control it with up and down arrows? Thanks ahead of time!
Kim : )
Hello Kim,
Thanks for your comments
I’ll definitely create a scroller that works with arrows. I just haven’t decided if it’s gonna be a different plugin or an updated version of this one. I’ll post an update as soon as it’s ready.
Thanks! Very cool. Looking forward to it!
Really neat plugin, Thanks Loads!
30/1/2011
Modified the plugin to scroll horizontally, images with different widths.
is the updated code what I get from the “download” button?
because I didn’t find it working with images of different widths even after this update.
Yes, the archive is updated so you should be getting the modified .js. I think that you probably getting the cached .zip.
Anyway, you can also grab the updated script from the demo:
http://manos.malihu.gr/tuts/jquery.thumbnailScroller.js
Very nice ! Thank you so much Mahilu for this wonderful work.
I have noticed that it doesn’t work on iphones our ipads. Do you have some information to fix that ?
Regards,
Dominique
Hello! The script is based on the mousemove event, which I don’t really expect to work correctly (or at all) on iOS devices. The thing is, I rarely develop for specific devices such as iPads etc. as they’re pretty limited, so I don’t know any solutions, fixes etc.
In my mind, a simple solution would be to add a condition to check for iOS and apply something like a normal scrollbar (e.g. css overflow:auto) on the container.
Thank you Mlihu
Love it, Love it, Love it. Please i really need your help with something when i insert the div with the thumbnails into a div inside of my coda slider #where, onmousover the thumbnails disappear out of view toward the right-hand side.
please see test page here: http://element.co.za/testsites2011/mfbf/test-index.html
click on #where
it’s strange, it works at first then when i refresh the page it doesn’t… please any guidance would be greatly appreciated.
Hello,
Try placing <script type=”text/javascript” src=”js/jquery.thumbnailScroller.js”></script> after calling ThumbnailScroller functions. You’ve also you inserted $.fx.prototype.cur function twice.
Hi, wow THANKS for having a look , I’ve cleaned up a bit like you said. but i’m still getting similar error.
now after they slide out of view if you open Firebug to inspect and mouse over the DIV area where the thumbnails are they shoot back and work as they should. same thing happens in Chrome with…
any idea’s? (bare in mind i’m no script ninja just learning as i go)
M
I think there’s an issue with the codaSlider script that scroll the pages. Try to place the thumbnail scroller scripts (both) after your last script (that among others, calls the codaSlider). If this doesn’t work, you’d need to call ThumbnailScroller function each time WHEREbutton is clicked and the document scrolling is completed.
Thanks for all your help you’ve helped me fix it. it works. we rally appreciate it. take care.
You’re welcome, thanks
This is an outstanding piece of jquery plugin. Awsome! Thanks for sharing.
I want to ask the same thing as Giovanna: Is there a way to slow down the speed of the scroll?
You told about: var animSpeed=600; I can’t find this variable in any of these files: jquery.thumbnailScroller.js or jquery.easing.1.3.js. So where is this variable? Because I want to slow down the left / right sliding.
Thank you
Thanks Mihai!
The “var animSpeed=600;” doesn’t apply any more since I’ve changed the original script to a plugin. The equivalent value is now the “The scroll easing amount” parameter in ThumbnailScroller function call.
This value changes the easing amount of the animation. The actual speed of the scroll is determined by the movement of the cursor over the thumbnails area.
I’m thinking of implementing this on a site I’m working on. One drawback is that I don’t always want it to start with the leftmost item. Is there a command that I can use as an onLoad event to make the scroller start X number of pixels to the right of its leftmost edge? That way I could effectively start it in the middle, with the possibility of scrolling off to either side.
Hello David,
There are a couple of ways to do what you want.
The first, is by setting the left or top values of .container div in jquery.thumbnailScroller.css. A negative value (e.g. left:-300px) would initially set the scroller to start with the thumbnail at 300 pixels.
Another way would be to automatically set your scrollers to initially appear in the middle of the scrolling area. For example on horizontal scrollers, you could do this by editing jquery.thumbnailScroller.js adding:
var initPos=($thumbScroller_container.width()-$outer_container.width())/2;
$thumbScroller_container.css("left",-initPos);
above MouseMove function.
Hi Malihu!
I’ve tried what you suggested, and the end result is that I can no longer scroll to the right past the image I moved to be pinned to the left.
I do this:
posOne = 0 – $(“#id_of_the_image”).position()['left'];
$(“#scrollerBlock1 .jTscrollerContainer”).css(“left”, posOne);
And that image become the left-most item (perfect), but I can’t ever get to anything to the left of it.
Thoughts?
Never mind, I’m just rewriting the whole thing.
I got the arrows to do the right thing by measuring various positions and showing or hiding the prev and next buttons as needed, and instead of moving .jTscrollerContainer, I moved .jTscroller. worked like a charm.
I need to substantially change how this works in some other ways in order to support fixed size objects with borders that always need to fall in place, so I’m starting from scratch.
Great extension though, super-useful, and got me to do what I needed to do.
Great plugin really usefull!
But I was wondering if there was a possiblility of adding a scrollbar . To move the scroll with it. And keeping the move of the scroll with the cursor.
Thanks!
I don’t if it was clear, I hope so
Hello! I’ve made another plugin that uses scrollbars. You can check it at: http://manos.malihu.gr/jquery-custom-content-scroller. Let me know if this is what you’re looking for
Actually, I have a gallery with some photo with the same height but a different width. And I want to keep the scroll with the movement of the cursor on the pictures. But I want to add a scrollbar like that other plugin.
Because if i understand your other plugin, the pictures have the same size. And I have picture with different size.
Both plugins support images with different dimensions
Hi,
First, thanks for that plug-in. It’s exactly what I needed and pretty nice.
Unfortunaly, I have an issue that make the plug-in usuable. Do you have an idea about why it only displays 4 thumbnails on 24 (my site), or 1 on 3, or 1 on 2, etc. (I made tests)? I was developping my website using Firefox displaying my development (from my hard disk) and it was very fine… But when I putted the site online, even on Firefox I see only 4 thumbnails on 24… On Safari, I only get 4 thumbnails, on a server or on the hard disk.
I made tests for hours to find the problem, but I have no clue. Maybe you have seen this before, so you can help.
Thanks,
Yann
Hi,
I’d have to check the code online somewhere to see if I can help. These kind of problems though are usually simple to solve, usually regarding mistyped urls, missing classes etc.
Yeah I am having the same problem. It seems like there is an issue with loading several images. When it loads the images, it may load a few of them, and then stops. Not sure why. Once I reload, it’s fine, however it does not work properly until all the images have been loaded in the browser.
I’ve been trying to figure this out all day.
Otherwise, great script. It’s really coming in handy.
Hey!
I am having the same issues. Have you figured out how to solve this problem?
Thanks in advance!
Hi,
This script is briliant ! thanks for sharing.
I get a strange behavior on page load/reload :
the thumbnails are “following” mouse position (instead of going in the opposite direction).
Any idea of what can cause this ?
I’m having a weird issue in IE – http://ohmibod.com/index-update.html
The thumbnail scroller is blowing up:( It works great in FF & Chrome.
I’m using PrettyPhoto.js for a lightbox & jquery.cycle.min to run a slideshow.
Been staring at this all morning, any help would be appreciated!
Hi i use your scroller plugin and it works perfectly.
1. U said in you comment reply before that ur plugins can be combined with lightbox. I use this lightbox: http://www.huddletogether.com/projects/lightbox2/
and combine with your plugins but i can’t see it can work together.
this is my file http://www.triasindo-jaya.com/scrollertest.zip
2. What jquery captify plugin that can be combine to ur plugin?
As information, im trying to combine thumbnail scroller+captify+lightbox.
I really need your suggestion n help
Thanks a lot.
Hello Daffy,
In the address http://manos.malihu.gr/tuts/jts/with_lightbox/ I have implemented the plugin with the lightbox version 2 (the same lightboxyou use). It works as it should without any problems. You just need to download and implement the updated version of thumbnail scroller
Thank u so much. You are my hero. I will download it as soon as I wake up tomorrow. U make me so happy today..
hi Malihu, I don’t find the download link/button on link u gave me (http://manos.malihu.gr/tuts/jts/with_lightbox/ ) so i try to “save page as” and change the path for js and everything needed to be change and then i dont see lightbox works. please suggest..
Thanks
Dear Malihu,
can u send me your http://manos.malihu.gr/tuts/jts/with_lightbox/ source code to my email?
i already download ur latest thumbnail scroller plugin and combine it to lightbox either i “save page as” that webpage and make change necessary but it doesn’t seem to work.
I don’t know my mistakes..
please help and thank u so much in advance…
Daffy
Daffy, I’ve uploaded a zip with all scroller and lightbox files. Download it here:
http://manos.malihu.gr/tuts/jts/with_lightbox/jts_with_lightbox.zip
Thank you so much.. it works perfectly
I’v had a problem with $thumbScroller_container width under IE and FireFox. Last .content div didn’t fit inside .container div. My solution for that was simply – I added +1 at this line:
$outer_container.data(“totalContent”,$outer_container.data(“totalContent”)+$(this).width()+1);
For me it made success. http://www.bener.com.pl/
Love the scroller but have a consistent problem with every scroller I have tried to use. When creating the scroller everything works great, when I use .load to load that page into a div on the main page the scroller breaks. I have tried loading thumbnail scroller with the .load callback function but no joy. This is not limited to your scroller it seems to be the same with *any* scroller I try. I would prefer to use yours! The other plugins on the same .load page work fine. Any ideas?
Need to see a link to check what exactly you wanna do
please check http://www.triasindo-jaya.com/malihu/
and i’ve upload the file http://www.triasindo-jaya.com/malihu/scrollertest.zip
thx
wrong post. sorry
I am currently using this thumbnail scroller for my gallery on my website. Once I got the scroller working, it has performed beautifully. But I have one question.
Is there a way to integrate a function where when an image in the scroller is clicked, it is displayed is a pre-defined image area. I have found this code:
$(“#myImage”).attr(“src”, “path/to/newImage.jpg”);
but I am not sure that is what I want. I am somewhat of a jquery/java rookie. I have a vertical scroller on the left and want images to display on the right. Any ideas?
good work… but i got in ie6 error
Not supporting ie6 at all, sorry.
Hi,
I am new to jquery but have loaded a few on to my site and understand the process. I’m having trouble with all of my thumbnails showing with this plugin. Is there a max or min setting for number of thumbnails shown on a single line? I have 7 images total (but plan on adding several others) and only four show up on one line. I expanded the height and can see that the other three are bumped down to a separate row. This made me think this was a sizing issue, so I tried expanding the width of the container. Even though it was significantly wider, still only four thumbnails.
I also then tried shrinking down the thumbnails themselves. After they were pretty small (100px by 100px) six were shown on the top line but one was still below it.
I’m not sure if there is a setting to change this, but everything else is working perfectly and I really need to figure this out after the time I’ve spent getting to this point
Thank you for your help!
Can you send me link so I can check it?Ooops just saw your e-mail
Is there anyway to determine the opacity over the pictures, or how faded it is to begin with until you scroll over? It’s just a little too light for us, and we’d like to lessen the affect just a little bit.
Thanks!
@eRINN
The 6th parameter of the ThumbnailScroller function sets the default opacity of the thumbnails (values 0-1).
Thanks a lot for the wonderful script!
I tried to add lightbox animation for the images through connecting jquery.lightbox script in the and writing in the code “”. But it doesn’t work. Is it something wrong in my actions or it is scripts incompatibility? Can you advise me what to do?
Check the latest version of the plugin
Is there a limit on the amount of thumb images you can load into this scroller? I have around 150 small thumbs (50×50), I can see the very last one fine but when I scroll all the way to the beginning the very first one seems to be hiding to the left to far.
Any ideas why?
Great tool btw!!!!
Respectfully,
Len
Hi,
I had this problem too, I tried to change things in “jquerry.thumbnailScroller.js” and it seems to work when you put 3 instead of 2 in this line (line 64 for me) of the function MouseMove :
var destY=-(((($outer_container.data(“totalContent”)+(tsMargin*2))-tsHeight)-tsHeight)*(mousePercentY));
I hope it helps you…
By the way, I’m looking for the same layout than Nick :
“I have a vertical scroller on the left and want images to display on the right. Any ideas?”
Very good job Malihu, I’ll have a look at your work more often.
Thank you !
Ok I was wrong, you just have to change figures in the $(window).load(function().
In ie 7 when you place your cursor over the thumbnails they disappear.
How can I fix this?
Hey,
Thanks for this plugin. You have done it really well! Unfortunately we have experienced problems in internet explorer…
Please have a look at this website:
http://www.milieudesign.co.uk/index.php?webpage=product_detail.php&product_id=49359&cID=15981
In chrome and mozilla looks great but in internet explorer 8 it goes really funny.
Do you know what is wrong? I tried to add “style=”width: 960px!important;”" to the and it made it smaller but for some reason it stretches the content… It is just not working correctly…
I added small script to yours which magnifies thumbnails on hover. It doesnt cause the problem because I tried without this and it still have problems… But if you want I could provide you code to do that magnification so that you could implement it in you script.
Thanks for your help,
Chris
This is SO AWESOME, thank you!!
Question: I’d like to do an image gallery like your “Denebola” and “Mark Sebastian” examples, with the old “click on the thumbnail to see the full size photo” routine. However, my site is more suited for a Vertical thumbnail bar than a horizontal bar, as you can see: http://www.whitefort.net/pix.html
I have no clue how to code it so it can figure out which thumbnail is being clicked upon–all the examples using OnClick-ey situations have horizontal scrollbars.
Li’l help?? Do you know of any examples or tutorials for vertical scrolling action? I don’t know much about javascript except it looks a lot like C+, which I learned, oh, 20-odd years ago and never used (being partial to Fortran, meself…)
please help.
not running your script. what am I doing wrong?
http://www.grand-prix.ru/catalog/sistemi-videonabludenia.php
Seems to work now
and how to do so when the mouse in img. img zoom
Me, like everyone else, love what the script does and thank you Malihu for personally providing support to those who needed it.
I have a bit of a hiccup while implementing the script and I hope you can help me out with it.
Here is the webpage that I am currently working on: http://www.soiltrec.eu/newsdemo.html. I have also included Lightbox into the script which works great with your script in Safari, Chrome and Firefox. However it does not seem to run in IE8.
I tried getting down to the problem but without much luck. The only thing I found is that if I were to remove the Lightbox scripts, the thumbnail scroller script would work, which seem to suggest a conflict between scripts. However I have already put in the jQuery.noConflict() function so it seems to be a dead end there
Help is greatly apppreciated!
I’ve updated the code so check the latest plugin version
Without downloading and delving into this, can this lovely scroller be set to automatic scrolling? I don’t see that in the presentational code here. Thanks.
There’s no auto-scrolling feature at the moment. If you wanna delve into this, you can try to animate .container div ($thumbScroller_container.stop().animate()) based on its dimensions when mouse is off the thumbscroller.
Hi malihu,
Awesome scroller.
I have a similar request for auto scroll. I don’t know JS well enough to do this solo, would you be interested in adding that?
If so how much would it cost?
@vlad
I’ll try to get some time to update the plugin within this weekend and add auto-scroll feature, so it’d be great if you can wait till Sunday.
There’s no cost for updating or adding features to my scripts/plugins (I only charge fees for specific customization requests by users or clients). You can of course make a donation (“buy me a coffee” link) if you wanna support the development and updating of scripts or just feel like I helped in some way
Added auto-scrolling feature to the plugin
Awesome major thanks, after this project is finished and I get paid I am sending you coffee $ for sure. Where are you located, that will depend on how much I send, cause coffee in NYC is probably like $20 and coffee in Bangkok is about $1 LOL j/k
Please check on our old “friend” IE 7, there is a weird glitch where everything jumps with the cursor.
Thanks!
V
@Vlad
Thanks.
I’m located in Greece (Europe). Coffee is like 5-10 euro here but you can donate any amount you want really
Love it. I’m in a basic html 5 class building a site.
My goal is to make the site phone friendly.
At one point in your comments you mentioned that you would look into creating the option to add up and down arrows to help navigate the scroller in ios environments.
Where you able to implement arrows?
Thanks
Jonathan
I have an arrows scroller ready somewhere although I’ve never posted it on the blog (don’t ask
). I’ll check if I can implement it as an additional feature in this plugin by Sunday when I update it.
I’ve implemented next/previous buttons on the latest update of the plugin.
Thanks a lot for personally helping people who need help like us!
I have implemented the thumbnail scroller and Lightbox scripts which work great on Chrome, Safari and Firefox. However in Internet Explorer 8 the thumbnail scroller does not seem to function when I hover my mouse around. I tried getting down to the problem but without much luck. The only clue I have is that that the thumbnail scroller would work if I take out the Lightbox scripts.
Here is the webpage that I am currently working on: http://www.soiltrec.eu/newsdemo.html
I am new to javascript hence I would really appreciate some help in resolving this.
Many thanks
Tad
I’ll update the plugin and add some new features by Sunday. I’ll also modify some variable names along with the way ThumbnailScroller function is called. Hopefully, that will fix any conflict issues
Done
Thanks a lot Malihu, I like the improvements and additional changes you have made especially the clickButton feature which was in my wishlist.
I have implemented the new thumbnail scroller (in addition to the Lightbox scripts) into the webpage below:
http://www.soiltrec.eu/newsdemo2.html
However the issue of the thumbnails not moving still seems to prevail in Internet Explorer. The jQuery.noConflict() function does solve the
script conflict issue in Chrome, Firefox and Safari, but the problem seems to be IE-specific which baffles me. Sometimes I wish IE never exist :/
@Tad
here: http://manos.malihu.gr/tuts/jts/with_lightbox/ you can see the demo of the plugin integrated with lightbox. The lightbox I used is version 2 (http://www.huddletogether.com/projects/lightbox2/) and it works well in all browsers including ie without any conflicts.
Thanks for getting back to me with an actual working webpage, it definitely helps. I suspect I might have accidentally made some changes which caused the thumbnail scroller not to work in ie. Now what I need to do is looking through my code (and comparing it side by side with yours) to see what went wrong.
Thanks again for the update today, the thumbnail scroller has just gotten better.
I found out that I was using a old/modified jquery script, changing that solves the problem.
@Tad
cool
the script is sooo nice. i have a problem.. i need it to keep scrolling even after user has passed the mouse over.
any comment?
Oscar, this seems like a retarded suggestion, but have you tried turning the auto scroll off?
Malihu, there are a few small bugs in IE one I mentioned above but not in detail:
1. Thumbnail scroller jumps up and down with the cursor, can be fixed by setting top:0!important… but kinda ghetto way of doing it
also Ie doesnt deal well with opacity so ie 7
*:first-child+html ul li{filter:alpha(opacity=65);}
Awesome Vlad!
Thanks for taking the time to test and post the css for ie7
PS. Funny how ie7 needs !important for top:0… go figure
IE 7 should have been retired along with IE 6 a long time ago. I think we are up to 9 now?
But oh well. Another good trick if you wanna get your IE’s all in one shot is
For those who want to make it more specific, http://www.webdevout.net/css-hacks has great hacks.
Thanks again for making the auto scroller, and the redesign is really good. I like the custom font, I didn’t know google made those, I generally used font squirrel to custom make mine.
LOL it blocked my trick! hahaha
it was
(!–[if IE])
(link rel=”stylesheet” href=”http://moragodpublishing.com/files/ie.css” type=”text/css”)
(![endif]–)
but with the “” instead of “(” “)”
Hey. This is a very good work man!
But can I have a question?
Is this possible to scroll while not all of the thumbnails are loaded?
Yes but you’d have to set a width/height value for the thumbnails (as html attributes or css properties) in order for the script to calculate scroller width or height correctly.
Wow! I’ve been looking for this! Thank you so much for this plugin.
I integrated it to my small blog powered by ModX CMSNeilYamit.com. And with a little CSS tweak, I was able to add a caption on the image.
Great stuff.
Hi there, thanks for the plugin.
I’ve slightly amended it so that when a thumbnail is clicked, it loads the linked image into an empty div on the page. Now I’m amazed to have been able to acheive that as I’m a rookie.
One thing that you might be able to help with however, I want to be able to highlight the clicked thumbnail and then remove that highlight and add it to the next once clicked.
My code is here – but it doesn’t seem to work
Any ideas?
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("ul#thumbnailImages li a").click(function(event) {
event.preventDefault();
var image = $j(this).attr('href');
$j("#largeImage img").attr('src',image);
});
});
$(function(){
$('ul#thumbnailImages li a').click(function(){
$('ul#thumbnailImages li a').removeClass("activeThumbnail");
$(this).addClass("activeThumbnail");
});
});
I want to use this with short, one-word captions underneath the thumbnail. Can you save me some time and tell me which CSS element(s) need to be modified?
hey dude, thanks for sharing this…
but I have to use more than one horizontal scroller in a page, when I use 3-4 same scroller in a page just one of them works correctly.
how can I fix this problem ? is a bug between keyboard and my chair (!!) or bug is because of your codes
?!!?
hi again !
dear master! I found the problem !!! the bug was between the keyboard and chair !! it dose fix just bye and operation in selector part !! like that $(“#tS2 , #tS6 , #tS8″) !!
thanks a alot
*Sorry, replied to someone else’s post rather than posting a new comment*
Hi there, thanks for the plugin.
I’ve slightly amended it so that when a thumbnail is clicked, it loads the linked image into an empty div on the page. Now I’m amazed to have been able to acheive that as I’m a rookie.
One thing that you might be able to help with however, I want to be able to highlight the clicked thumbnail and then remove that highlight and add it to the next once clicked.
My code is here – but it doesn’t seem to work
Any ideas?
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("ul#thumbnailImages li a").click(function(event) {
event.preventDefault();
var image = $j(this).attr('href');
$j("#largeImage img").attr('src',image);
});
});
$(function(){
$('ul#thumbnailImages li a').click(function(){
$('ul#thumbnailImages li a').removeClass("activeThumbnail");
$(this).addClass("activeThumbnail");
});
});
Hello,
Just by looking at it, you should probably write a single function like this:
$j("ul#thumbnailImages li a").click(function(event) {
event.preventDefault();
var image = $j(this).attr('href');
$j("#largeImage img").attr('src',image);
$j('ul#thumbnailImages li a').removeClass("activeThumbnail");
$j(this).addClass("activeThumbnail");
});
Hi thanks for the reply – i’ve sort of scraped together a similar conclusion – although your version is neater. Thanks!
Hi there,
Thank you for sharing your work with all of us! Its really good!
I want to ask something about this script.. And the question is:
Is there a way to start the scrolling queue from a particular image? For example I want the first image on the left to be the 4th image in the list:
//visible
//visible
//hiden
//hiden
Thanks! : )
Kris
ughh : ) sorry for the empty spaces.. it was some html example : )
the ide is:
a> img1 img 2 img3 img 4 img 5 img 6 img 7 img 8 img 9</a
Hi Kris,
You can alter the left or top values of .container div in jquery.thumbnailScroller.css. A negative value (e.g. left:-300px) would initially set the scroller to start with the thumbnail at 300 pixels.
That is OK, but if I want it to start from a particular image then what? And if I have images with a different width? : ) The question is – is there an easy way to tell the script to start from an element. I want to use your script in an image gallery which will load all the images from a db. When you click on a thumbnail the page will reload showing a big view of this thumb and the rest of thumbnails starting with the shown image..
If the image I speak about is number 4 in the sequence then the scroll should start with it, and if you want to see the previous images you should scroll left then.
Did you get me now?
I see. There’s not an “easy way” of accomplishing this. Not without adding some extra function(s) to the script, because you would need to find the index number of the starting image, calculate its left position and set its negative value as the css left property of the scroller with js.
hi malihu,
please open http://www.chrisbunjamin.com/commercial.php with mozilla firefox and see one of thumnail images become whiter than the other (the real image is not whiter like that). how to fix it? but theres no problem in internet explorer
thank you
the image i mean is the second thumbnail in http://www.chrisbunjamin.com/commercial.php where the photo have wallpaper “LOW”. it become whiter in mozilla firefox. is there anything i can do with css or what do u suggest for this?
thanks a lot
Hello malihu,
Indeed, thanks for a very smooth scroller. I am trying to make a gallery for my mother, and am having the about same situation as Vikki Neal above ( http://manos.malihu.gr/jquery-thumbnail-scroller#comment-5075 ). I want to be able to click a thumbnail and have a larger image open in an empty DIV to the right of the scroller.
You gave her some code and I tried applying that inside the script in the HTML where I thought it would go, but since I am new to jquery/javascript (this gallery for my mother is my first project) I probably didn’t put it where it belongs. (I did nest the thumbnails inside a , create the empty div with the proper #, but that did not help.)
Do you think that you could give me some indications of how to integrate the code you gave her into your latest version of the scroller?
I would be very greatful!
Thanks,
/Pierre.
Hi,
The code I posted on the previous comment is for a slightly older version of the plugin and was based on Vikki’s markup. Basically, if you’ve used the latest version, you should add something like this inside (or not) jquery.thumbnailScroller.js:
$(".jTscroller a").click(function(event) {
event.preventDefault();
var $this=$(this);
var image = $this.attr("href");
$("#your_image_placeholder_id img").attr("src",image);
});
Change the “your_image_placeholder_id” with your element id and place inside it an empty img tag (e.g. <img src=”" />). Of course you need to have the image url you wanna load inside each thumbnail anchor href attribute.
This is the absolute minimum code to load new images without any preloaders, selected thumbnail indicators etc.
Hope I helped
Thanks a lot Manos, and for your quick reply as well.
I had to move around the script-snippet a few times in order to get it in the right place inside the .js, but now it works and I just have to play with the CSS to position everything. Then it will be a jQuery tutorial-project for me to try to add preloader and thumbnail indicators on my own.
Have a nice day!
Hi Malihu,
Great job !
A question/issue with autoscrolling: I’d like the slideshow to start and scroll automatically if people does not click on the arrow.
I set
autoScrolling:5,
autoScrollingSpeed:2000,
autoScrollingEasing:”easeInOutQuad”,
autoScrollingDelay:10
Is it an issue on Firefox ???
Thanks
It should work and it works well on Firefox 4 without any issues. What’s your version?
Hi Malihu,
Fantastic plugin!! Thanks.
Im trying to do a simple change, but getting some dificulties. I want to show the arrow not on top of the thumbs, i want them to on the Right and Left of the Thumbs. I tried to change the Right and Left css properties to negative but has the div has the overflow propertie set to hidden, just dissapears. Any idea how this can be done?
Once again, thanks for the great work!!
Best regars
Bruno Fernandes
Hi,
On demo 5 (http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_multiple.html) there’s a horizontal scroller (#tS2) with next/previous arrow buttons. You can see the buttons styling on the css included in the download archive (http://manos.malihu.gr/tuts/jquery.thumbnailScroller.css). You can also check any of the elements with Firebug (Firefox) or any other browser developer tools.
Great script! Thanks.
Just a quick question: would there be a way to modify the script so that when “scrollerType” is set to “clickButtons” it scrolls a single image width, rather than the view width?
Hi,
1st
I use the script to link between pages, and when the page has loaded it scrolls back to the first thumbnail. Can I somehow tell the script to go to the currently selected thumbnail?
I have a class to change the background of the thumbnail (they are transparent PNGs), do you think I could use that class?
2nd
Is it possible to move the arrows outside the scroll area to keep them from blocking the thumbnails underneath?
$(‘#tS1′).bind(‘click’,function(){
$this.remove();
$(‘#tS1′).hide();
});
I put this inside the function, I want to make it once I click a items on the horizontal bar, then the whole bar will hide and the other under the bar will show up, how to make it? thanks.
please ignore this…i have solved this already. thanks.
I want to add some text under each image, how can I do that?
thanks.
I am trying to implement multiple scrollers on 1 page. Some scollers contain 4 images and others contain 20. Strange things happen when there are only 4 images in the scroller (I am using 100% width). Does the scroller check if the totalwidth of all thumbs is smaller then the width of the window ? if yes, it should not perform any scolling, if no, start scroll.
Now it will starts following my mouse in reverse when there are not too many thumbs.
My mistake, this was due to the height to which it validated true.
This is a GREAT tool! Thank you!! I have a really quick question as I’m having trouble integrating the horizontal scroller in my map buble views. You can see an example at:
http://www-olga.classicizingchicago.northwestern.edu/search/localsolr/chicago
Click on the Art Institute of Chicago pin to see what I’m trying to do.
As this is a Drupal site I had to make some changes to the method (i.e. replace $ with jQuery) and also modify the call to it as well:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(“#tS2″).thumbnailScroller({ //OLD WAY: $(“#tS2″).thumbnailScroller({
scrollerType:”clickButtons”,
scrollerOrientation:”horizontal”,
scrollSpeed:2,
scrollEasing:”easeOutCirc”,
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:”easeInOutQuad”,
autoScrollingDelay:500
});
});
The issue I am running into is that the scroller works only if I have an alert on the page before the load of the bubbles. I tried placing the above call at the very bottom of my html (right before the closing tag) but that wouldn’t work.
Any help would be greatly appreciated! Either way, great sleek design and awesome work on the thumbnail scroller!
Hi,
Instead on document ready, try to call thumbnail scroller function on window load. Change:
jQuery(document).ready(function(){ ...
to:
jQuery(window).load(function(){
hanks a bunch malihu! I tried that (right before the end of and also within the map bubble code to see if either would work, but unfortunately I get the same results.
Here is the URL :
http://www.classicizingchicago.northwestern.edu/search/localsolr/chicago
I think it may have to do with the load of the bubble itself. If you have any other recommendations, please let me know. I’ll dig more.
Any body having the issue with google crome that if your scroll works some times and sometimes not.
try using the malihu suggestion.
Instead on document ready, try to call thumbnail scroller function on window load. Change:
jQuery(document).ready(function(){ …
to:
jQuery(window).load(function(){
Thanks you, i am using now my web site. Programing a new time. Simple and wonderful scroller! Thanks you..
I’m trying to reformat my photography site which is currently in Flash into an HTML 5 version. I’m trying to implement your thumb scroller but not having any luck despite almost copying and pasting the code and examples from above.
The problem is, although the bar with the thumbnails appears, the next previous buttons don’t (they do exist and are correctly referenced). Even if I chose one of the hover methods the thumbnails don’t move.
Any ideas?
You can see the page with the scroller here:
http://importedlight.com/v3/show.php?a=17
Suspect my previous problem might have been something to do with the CSS as its “sort of” working now.
Ok – new problem!
The very last image in my thumbnails seems to insist on wrapping onto the next line. This means if you use the Prev/Next buttons it looks okay but you never see the last image as its hidden below. If you use the hover-scroll options then the whole row scrolls up if you move the mouse down and you can see the final wrapped image right at the left.
Example – Next/Prev buttons
http://importedlight.com/v3/show.php?a=15
Example – Hover Scroll
http://importedlight.com/v3/show2.php?a=15
hi malihu,if I put only one image in div,the div’s width is more than that image’s width ,and if I move mouse over div,the image followed mouse pos,I hope if all images’ width less than div width,they don’t move under mouse cursor.
Having a bit of trouble loading the plugin… I’m trying to integrate it with a Nivo Slider with thumbnails generated by WordPress via timthumb… everything looks fine from what I can tell but it just doesn’t seem to be working at all. There are a few extra classes in there but the structure of the html side of things looks fine but the script doesn’t appear to be working at all. Anybody had any luck getting anything like what I’m trying to do to work?
http://www.jolieanddeen.com.au/collections/spring2011 <— here's the page I'm working on… there are 20 thumbnails there, 4 of which are hidden…
If anyone could have a look at let me know if they can see anything obviously wrong I would be eternally thankful. I've just about thrown my computer at the wall trying to work this one out myself!
This scroller is working better than I expected.
I have included more than 15 thumbnail scollers on my website (integrated into wordpress) and its performance is flawless crossbrowser. I have to added some if else statements to set the “click buttons” in case of mobile devices. But other than that: thank you very much for creating and supporting this plugin.
Suggestion: set the height() and width: auto; for the images in jquery based on a thumb size, else IE7 will render it incorrectly.
Take a look: richardbakker.com
Hi guys, I have had my site up for a while and i’m noticing an intermittent problem with the script, check out http://www.sodesigns.co.uk, it may happen it may not, but basically, when I scroll to the left all the images scroll too far off the page.
It’s as if the Stop function is not working properly. I had a developer do this for me initially, and have no clue on how to fix this, but i’m hoping it won’t be that hard and it’s something i can do myself.
Help!!!
Hi, that scroller is great, but I have problems with it under Opera 11.50 .
http://unifire.biuro.evillage.pl/node/3 – do You have any ideas, what to do about this problem? Navigation scrolls just link to top of the page and are always displayed. And, what’s bigger problem – it’s not scrolling.
Hey there,
Thank you so much for such a great script. I have a question – is it possible to be able to scroll to the end (the right) and then it loops back around to the beginning?
Kind Regards
Hello,
Nope. This particular plugin cannot behave as carousel with those types of scrolling, as it interacts mostly with the cursor position over it.
No problem, I understand.
Thanks for such great work.
Regards
I’m noticing a “jitter” at the far right using Firefox and IE (Safari seems ok). I see your demo here also does it so I’m wondering if there’s a known fix for this?
What happens is when the thumbnails get all the way to the right, instead of stopping on the last thumb it jitters back and forth. Any help would be GREATLY appreciated!
Does this happen on “hoverAccelerate” mode? That jitter happens once or?
Thank you so much for such a great script. I have a question – is it possible to be able to scroll to the end (the right) and then it loops back around to the beginning?
I’m noticing a “jitter” at the far right using Firefox and IE (Safari seems ok). I see your demo here also does it so I’m wondering if there’s a known fix for this?
What happens is when the thumbnails get all the way to the right, instead of stopping on the last thumb it jitters back and forth. Any help would be GREATLY appreciated!
Hey there!
I have tried out this scroller on my site and having the same issues as some others here. Sometimes the scroller (horizontal) only loads a few images instead of the much more I have in the code. I have managed to figure out that in these problematical cases the width of jTscrollerContainer is not set correctly. I would be grateful if you would share your ideas why this happens.
Thanks in advance.
So cool . Thanks .
Hi there Malihu,
I am using this incredible plugin, which is AWESOME!
But I have a little problem, I want to use multiple thumbnail scrollers on my website and the first one works great, but the others just display the first 4 images and it can’t be scrolled! I have checked the code and its perfect, I even copied the javascript source for each scroller and it doesn’t works!
I would appreciate your help and congratulate you for this great plugin!
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!
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.
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
These are some great scripts and integrate well with Scriptaculous, etc. Thanks!
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!
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.
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.
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.
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
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!
The script is working well on IE, but still bugs on Firefox!
Really nice thumbnail scroller, we are using it on a new project. Regards
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?
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!!
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
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
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({ ... });
}
});
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
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??
Nice jquery scroll. thanks for sharing this.
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.
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 ..
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
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.
Another problem, when I call jQuery.noConflict();, datepicker (ui library) crashes, I’m using both and few more jquery plugins on my website.
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.
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
And also demo page is not working correctly in IE7 (vertical flying) Demo 1. What is wrong in this this plugin???
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.
Oldest version is much better for me.
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
very nice dude, very simple code for easily understand.
Hi, is there a way to externally call the plugin to scroll to a specific element?
Hello!
This plugin is really great. But …
IE doesnt show the box-radius and has also a problem with the transparent prev and next buttons.
The transparency problem is solved with prefixr.com. Just paste the code of the jqueryThumbnailscroller.css and “prefixize” it, prefixr is great to make code work in all browser and if you want to minify the css.
I use this plugin in a div that is invisble first (display:none) wich you can open with a click on a button. the plugin looks for the width and height of the div, wich equals zero if the div has display:none, so it doesnt work. To make it work, i just made the div visible, let the plugin initiate and after that the following easy jQuery code:
$('#divname').css("display", "none");
Thanks for the nice plugin!
This is a fantastic little doodah! Very customiseable as well. Thanks for all the hard work
What is the simplest way to get a larger image changed out that has different heights and widths? I looked around the code and didn’t see anything to show me how this done. IS this some thing that happens within jQuery or is back at the HTML side of things. Sorry for such a basic question but I am new to jQuery. Nice plugin by the way… very smooth
I want to add a margin-right on each thumbnail but the problem is that the last thumbnails are disappearing. So, my question is how to add a decent padding (margin) on those thumbnails without disappearing.
malihu – it still doesn’t work correctly in IE7 – flying content (see Demo 1). I think that vertical position (top or margin-top in source) shound’t be changed in horizontal mode.
Is there any way to make it so the images are in a grid say 10×10 and can scroll both vertically and horizontally?
Great script, thanks!
I’m wondering if it’s at all possible to turn the scrolling OFF, or pause it temporarily?
When one of the links in my scroller is clicked, several things happen – the scroller moves so that the clicked image is centered on the screen, a new div is created, then some content is loaded into it, etc. While that new div is open, I’d like the scroller (behind it) to stop scrolling. When the div is clicked to close it, then the scrolling resumes. I can figure out the callbacks to make it resume, etc, but I just can’t figure out any command to make the scrolling stop. As long as the cursor moves over the scroller, it keeps scrolling. I’ve tried things like $(“#web”).thumbnailScroller().stop(); or just setting all the parameters (such as scroll speed) to zero, but none of that works. Any suggestions?
Ahhh….as usually happens, the moment I asked for help, I figured it out! I haven’t tested in all browsers yet, but so far in Firefox, my solution is working. I just created an invisible overlay div that I show or hide; when it’s ‘turned on’, the mouse movement isn’t picked up for the layer under it, so it doesn’t scroll.
Hi!
I can’t get the script to work. Any help would be very appreciated.
Ola
Hi, excellent script! Works beautifully. I would like to make one tweak and would love some help… I’d simply like to position the arrows in a completely separate div rather than within the actual carousel div. What do I need to modify in the code in order for this to work?
Thanks!!
This plugin doesn’t seem to work with jquery 1.6.4 (or perhaps 1.6). Are there any plans to get this working with the newer versions?
Thanks,
Dave
I’ve tested the plugin with latest jquery (including 1.6.x versions) and works as expected. Can you provide more details about your tests?
For anyone having problems running this plugin with IE7, I found the following workaround (all modifications to be made in jquery.thumbnailScroller.js) :
Add 60px to totalWidth line 34 and push the DIV to left/top 0 in all conditions before displaying by adding these 2 lines at line 36, after css/width.
The code block line 33 thru 37 is then
var totalWidth=$scroller.outerWidth(true)+60;
$scrollerContainer.css("width",totalWidth);
$scrollerContainer.css("left",0);
$scrollerContainer.css("top",0);
You got 60px of blank space after the images but it works and IE doesn’t put the last image on a new line. Didn’t find anything better…
BTW thank you malihu for this great plugin !
nicely done – exactly what i was looking for – will use o several sites. thanks!!!
you saved my life! thank you for this great script
Awesome script! Was wondering if there is a way to have two rows of images, or more. When i try to achieve this through css, lots of glitches occur. Any ideas?
It’s very interesting! I would like to know how can i put text content over each image. I tryed putting it on an but it don’t work.
Hello,
Thank you very much for the awesome script, however I have found a bug. If you zoom in by holding ctrl and using the mouse wheel in EI9 and latest chrome, and then refresh the page… the mouse over (hoverprecise) horizontal scroller the last image is placed on a new line. I’ve replicated it with the demo from this site and on my own site as well.
Here is a screenshot of what I’m talking about, I increased the div height so you can see the last image is on another line.
The script works perfectly when at 100% browser zoom and below, but whenever the browser zoom is above 100% the last image is on a new line and messes up the scroller.
http://remoteincome.com/bug.jpg
I’ve visited other sites that are linked in these posts and some I can’t replicate the problem, while others I can. How can I fix this?
It’s very nice. Can you make it compatible with touch devices?
At the moment, only by setting scrollerType to clickButtons will do the trick for touch devices.
For the Click Buttons scroller type, when we hover over the scroller, is there a way we can pause the scrolling animation?
Great script! I’ve managed to get an instance working. My question is, if I want multiple instances of the SAME scroller, I understand I can’t use multiple instances of the same “id.” How can I tweak the javascript so it’s linked to class and not an ID? Thanks!
Nevermind, I just figured it out. I wasn’t plugging in the correct class name in place of the ID. This script is now working in multiple instances beautifully. Thank you!!!
Hello,
In regards to the horizontal thumbnail gallery with ‘previous’ and ‘next’ buttons, is there a way to have the buttons to rest in their own area as opposed to sitting on top of the thumbnails?Similar to this gallery on this webpage from flowplayer.org:
http://flowplayer.org/tools/demos/scrollable/gallery.html
I’ve tried tinkering with the css coding, but no luck…any help is greatly appreciated!
Thank you,
Chris d.
I’m using the following for my scroller and it works fine if I set autoscrolling to 0. But if I change autoscrolling to any other number the scroller goes vertical instead of horizontal. Any ideas?
scrollerType:”clickButtons”,
scrollerOrientation:”horizontal”,
scrollSpeed:2,
scrollEasing:”easeOutCirc”,
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:”easeOutCirc”,
autoScrollingDelay:500
Great scripts, works great.
Problem: building a website that uses a horizontal menu using Java Script.
When I insert the thumbnail scripts, the scroller works as it should.
But my horizontal menu disappears.
When I remove the thumbnail scroller plugin (jquery.thumbnailScroller.js) before the , the horizontal menu re-appears. Of course the scroller doesn’t work either.
When I reinstall the scroller plugin, the horizontal menu again disappears.
Seems to be some sort of conflict, any advice?
Hello!
Your slider is so awesome you are great to be giving this thing away!
I’m wanting to use the slider as a thumbnail navigation for youtube videos.
In other words I want visitors of my site to browse using the slider and when a thumbnail is clicked the video is loaded into a specific div on the same page. is this possible?
Please help almighty guru lol!
Hey, I just want to say thank you for this plugin. It is truly awesome!
One thing I was wondering, and couldn’t seem to find an answer in the comments, or by looking at the code.
Is there a way for when you click on the arrows for more thumbnails to display, if they can skip one by one, instead of 5-10 at a time, or however many are next down the line?
Great stuff…thanks so much for sharing! Question = Lets say I have 30 images (5 shown at a time) when you click the next button 3 times your viewing the images 15-20. if I click on image 16 it loads up that image (reloads the page) which effectively resets the scroller back to the initial position. Is there a way I can evaluate which image I am on (in some way) and then auto push the scroller to that position? (in this case it would auto scroll to the 3rd click over because the current image is located there) – having trouble wrapping my head around how that could work! …thanks
Awesome tool! Quick question: First time I call ThumbnailScroller, I only get the first 11 (of 16) images to load. After that, everything works fine. Any thoughts? [When I add extra dummy thumbnails, all but the final 5 images will load on the first call. Again, additional calls work fine.]
Hi,
Nice work but one question, how can I specify a height of 100% in a vertical scroller so it resizes if a browser window is reduced by the user.
Thanks.
Hi John,
Check demo 5 http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_vertical_full.html that demonstrates non-fixed height (percentage) scroller.
Hi there,
Great Scroller
I am looking to place the next and previous arrows outside of the div class=”jThumbnailScroller” .
Is this easily possible and if so how can I. Currently when I put it out of that div it won’t display on the page.
Thanks
Hi Malihu,
I came back after a while because I love this gallery and just realized that it works very poorly in IE 7 and 8 (I don’t bother with 6 anymore) Take a look at the 5 demo page.
The width doesnt render properly, the nice cirlce butons are square, and the auto scroll speed is all jumpy.
I resolved some of these issues in my test server: http://chaoticgeometry.net/
like using bg images for the buttons and forcing min-width in ie 7. but the jaggy movement is beyond me. Any suggestions?
Nice script mate. Thanks for sharing as open source. Good luck for the future!
B/w – you can try adding paging to comments so to improve this page.
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.
I was using jquery’s document.ready instead of window.onload (as properly documented
the scroller was being initialized before the images loaded. solved.
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!
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?
Mine doesnt seem to scroll at all. Thoughts? Help would be awesome
http://69.72.250.115/pdj/#
Hi,
I think you missed to include jquery-ui-1.8.13.custom.min.js (jquery UI) that handles the easing part of animations.
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
Thank you Malihu for the very nice thumb scroller.
— Ximbalo
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.
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?
don’t scroll ??
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
68 Trackbacks
[...] http://manos.malihu.gr/jquery-thumbnail-scroller [...]
[...] http://manos.malihu.gr/jquery-thumbnail-scroller [...]
[...] This post was mentioned on Twitter by ไอ้แอนนนนน, Daniel Sentker. Daniel Sentker said: RT @malihu jquery thumbnail scroller http://bit.ly/c2Gwcv [...]
[...] Thumbnail-Scroller [...]
[...] Direct Link [...]
[...] http://manos.malihu.gr/jquery-thumbnail-scroller [...]
[...] This post was Twitted by nightangeldotfr [...]
[...] jquery thumbnail scroller [...]
[...] jquery thumbnail scroller [...]
[...] jQuery framework Demo: http://manos.malihu.gr/jquery-thumbnail-scroller License: Free License '; var dzone_style = '1'; [...]
[...] will be using the awesome jQuery thumbnail scroller by Malihu. Big thanks to him for this great and smooth [...]
[...] will be using the awesome jQuery thumbnail scroller by Malihu. Big thanks to him for this great and smooth [...]
[...] 我々は、使用するサムネイルのスクロールによるMalihu jQueryの素晴らしい。この偉大な滑らかなスクリプトの彼にビッグありがとう！ [...]
[...] will be using the awesome jQuery thumbnail scroller by Malihu. Big thanks to him for this great and smooth [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] 1. jquery Thumbnail Scroller, Demo [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller, [...]
[...] 1. jquery Thumbnail Scroller, Demo [...]
[...] 1. jquery Thumbnail Scroller, Demo [...]
[...] jquery thumbnail scroller [...]
[...] jquery Thumbnail Scroller, [...]
[...] 1. jquery Thumbnail Scroller, Demo [...]
[...] jquery thumbnail scroller [...]
[...] The thumbnails scroller will have the following structure (based on Manos Malihu’s thumbnail scroller): [...]
[...] The thumbnails scroller will have the following structure (based on Manos Malihu’s thumbnail scroller): [...]
[...] The thumbnails scroller will have the following structure (based on Manos Malihu’s thumbnail scroller): [...]
[...] jQuery Thumbnail Scroller [...]
[...] The thumbnails scroller will have the following structure (based on Manos Malihu’s thumbnail scroller): [...]
[...] And finally, the function for creating the scroller container (adapted from Manos’ script, check it out here: Manos Malihu’s thumbnail scroller) [...]
[...] We will be using Manos Malihu’s brilliant thumbnail scroller which you can find here: Manos Malihu’s thumbnail scroller [...]
[...] We will be using Manos Malihu’s brilliant thumbnail scroller which you can find here: Manos Malihu’s thumbnail scroller [...]
[...] We will be using Manos Malihu’s brilliant thumbnail scroller which you can find here: Manos Malihu’s thumbnail scroller [...]
[...] jQuery Thumbnail Scroller [...]
[...] will be using the awesome jQuery thumbnail scroller by Malihu. Big thanks to him for this great and smooth [...]
[...] We will be using Manos Malihu’s brilliant thumbnail scroller which you can find here: Manos Malihu’s thumbnail scroller [...]
[...] We will be using Manos Malihu’s brilliant thumbnail scroller which you can find here: Manos Malihu’s thumbnail scroller [...]
[...] The thumbnails scroller will have the following structure (based on Manos Malihu’s thumbnail scroller): [...]
[...] jquery thumbnail scroller [...]
[...] jquery thumbnail scroller [...]
[...] We will be using Manos Malihu’s brilliant thumbnail scroller which you can find here: Manos Malihu’s thumbnail scroller [...]
[...] aprovechar una solución ya existente. He utilizado jMyCarousel. Otras opciones disponibles son: jQuery Thumnail Scroller o Thumbnails preview slider, por ejemplo.Comenzamos entonces con el contenido que vamos a mostrar, [...]
[...] Hadas is a great graphic designer, that works with some of the best publicists in Israel. I built her site using an early PearlyWEB version, and it is comprised mainly of her clients galleries, and some personal details. The galleries displayed in her site are based on the jQuery plugin – Nivo-Slider, and another great plugin used in her site is Malihu’s Thumbnail-Scroller [...]
[...] jquery thumbnail scroller [...]
[...] The thumbnails scroller will have the following structure (based on Manos Malihu’s thumbnail scroller): [...]
[...] http://manos.malihu.gr/jquery-thumbnail-scroller This entry was posted in ｊQuery. Bookmark the permalink. ← おしゃれなjQueryプラグイン [...]
[...] http://manos.malihu.gr/jquery-thumbnail-scroller This entry was posted in ｊQuery. Bookmark the permalink. ← おしゃれなjQueryプラグイン Shadow animation jQuery plugin → [...]
[...] jquery Thumbnail Scroller, [...]
[...] jquery Thumbnail Scroller [...]
[...] için fonksiyon (Manos 'senaryosu uyarlanmış,burada bir göz atın: Manos Malihu’s thumbnail scroller) function buildScrollableItems(){ totalContent = (scrollerContentCnt-1)*itemHeight; [...]
[...] jquery thumbnail scroller Share this:共有メールアドレス印刷FacebookTwitterLike this:Like一番乗りで「Like」しませんか。 カテゴリー: jQuery. コメントする » [...]
[...] jquery thumbnail scroller. [...]
[...] jquery thumbnail scroller [...]
[...] jquery thumbnail scroller [...]
[...] 15- jquery Thumbnail Scroller [...]
[...] DOWNLOAD [...]
[...] jquery thumbnail scroller [...]