jQuery Tools Scrollable is an awesome plugin for creating scrollable image & content galleries. We used it for the portfolio and footer sections on peacock.st. The only gripe I had with it is that it buffers clicks on navigation elements, which might be ok for some people but wasn’t desirable behaviour in our case. Thankfully it’s quite easy to change this behaviour so that any clicks on the navigation will automatically complete the current animation and animate to the next element in the scrollable.
All you need to do is open up the js file that contains scrollable (you can do this with the minified file, you don’t need the source), and find the part that says “h.animate(n,c,e.easing,k“. Replace this with “h.stop(true,true).animate(n,c,e.easing,k“. So just before the animate, you are putting a .stop(true,true) in. As you may already know, .stop() stops the current animation in it’s tracks (so it doesn’t complete). This isn’t always useful, in our case we do want the animation to complete but we want it to jump to the end instead of waiting for animation to complete. The second argument true tells .stop() to complete the animation immediately which is what we want. The first argument tells it to clear the animation queue. You can read more about jQuery .stop() here: api.jquery.com/stop/
I’m sure this will be of use to many people. If you have any questions about this post, please feel free to leave a comment below.
If this post has helped you out, feel free to consider throwing a small donation my way.
Thanks! The buffering clicks were a pain in the ass! Now I can sit normal 🙂
Thanks for this! Saved me a lot of trouble and time.
I tried this alteration but the page crashes FF8.0 when using version 1.2.6. Can you supply maybe an example link and your versions?
It’s still working for me in FF8, jQuery Tools 1.2.6. I’ve created a standlone demo based off the jQuery tools demo, you can check it out here: http://www.christianvarga.com/demos/jQuery/scrollable/. Hopefully this helps in debugging your issue.
Good tip using .stop(true,true) helped me with an animation issue I was having. Thanks for posting!