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.