Categories
programming

jQuery Tools’ Scrollable as a circular carousel

jQuery Tools - Scrollable
I recently discovered a new jQuery effect library named jQuery Tools. It’s like jQuery UI but more focused on the core items that can improve the usefulness of a website. Tabs, tooltips, scrollables, overlays, and a few more. I began using it this week to replace a carousel on my website at work. My website uses several different javascript libraries for these very same techniques but they’re all from different authors. I like the idea of having a single library instead of tracking several so I’ve started converting those libraries over to jQuery Tools. The first to go was the homepage carousel.

After replacing the old carousel with the new one, I discovered that the new code didn’t provide a way to do circular carousels. It had a fixed beginning and an end. You could program it to loop but when you got to the end and told it to move to the right again it would actually scroll really fast to the left until the first item was back on the left edge. In a circular carousel, if you’re on the last item, you want the first item to show up to the right of the last item if you move past the end, looping forever.

So, with the code being released under the GPL opensource license, I did what any self-respecting developer would do. I patched the code to make it circular when you told it you wanted it to loop. This is a change from the old way it worked so people using this library and expecting the old functionality should be warned. I could have added a “loopmethod” config variable but I didn’t want to introduce any new configuration variables without approval from the true author. As it is, I only added one new method – a way to move a specific item to the left most item using an unnoticeable jump, instead of the default scroll. This is part of the magic that makes it able to simulate a circular loop. Compressed with the YUI Javascript Compressor, it only adds 600-ish bytes to the code. Even less, when you finally gzip it. Acceptable for the return in functionality, IMNSHO.

I haven’t tested it 100%, notably the code where you are using the custom API methods, but it SHOULD be good to go by just replacing your old version. YMMV. I will be submitting this to the author of jQuery Tools so he can evaluate it for the next revision of Scrollable. In the mean time, test it, use it, let me know what you think.

Download the Scrollable javascript

UPDATE 7/6 – Added autoscroll pausing when hovering over the specific page nav links, just like when hovering over the “next” and “previous” links.

UPDATE 7/6 #2 – Fixed a problem with the “disabledClass” on prev/next/prevPage/nextPage when looping. Those elements should always appear when looping and you have them in the html.

UPDATE 7/7 – I’ve pushed my updated version of the code to my employer’s website so you can see the circular ability in action. Visit http://www.ruckuswireless.com. The homepage has the page nav links underneath while the “Solutions”, “Verticals”, “TechTalk”, “Products”, “Ruck(us)” and “Management” page – under Ruck(us) – do not use the page nav links. Note that on the “Ruck(us)” page, the “next” and “previous” links are automatically hidden because there aren’t more items than are already displayed.

14 replies on “jQuery Tools’ Scrollable as a circular carousel”

Nevermind… it took me hour to understand you modified the source code and did not make a conf.

Good job.

Just used your modified code. You are 100 times more awesome than I posted on the Flowplayer.org forum. It is excellent! Thank you.

Hello,

Great idea to add this functionality. I noticed that the carousel on Ruckus Wireless is acting a bit odd if you click on one direction 5 or more times, it will break the carousel behavior and perform a “scroll really fast” to the final page.

I’m not sure if it’s the timer script triggering an auto focus causing the fast scroll back effect. If this not the case then, perhaps we need a queue system for the consecutive click actions as 5 clicks is JUST 1 greater than the total page count and that causes undesirable behavior in the loop tracking code… or it could be a coincidence.

Anyways, it’s a great idea and I would love to see this feature get polished.

Thanks for your work. I think I’ve found a bug in API, though: seekTo(index) does not go to the item it suppose to.

Very nice job on the carousel. I use a different kind but I will keep this one in mind.
I’m interested tho how you managed to use the jw player in the overlay and stop/unload it when you close the overlay. Can you enlighten me on this?

Tnx 🙂

Hi there,

I’m using the old version now, but what must i change in my code to get one as on your site ?

Damn, i must re-read my posts before submitting… What i meant : i use loop :true now, but what should i use to get a circular loop ?

@JavDev – yeah, I see that. I tried putting in a capture for multiple click events, or a counter or something but it got really complicated. I’m relying on the user to not do that. I don’t see it as a huge deal.

@Rbs – can you provide more details? I’ll look into it though

@Marvin – thanx. the jw player is loaded into a lightbox with an iframe,using colorbox. So, once the lightbox goes away, the iframe does too. I guess because the iframe is a separate page, it’s properly unloaded and stops playing. Now, if the jw player were loaded as via an inline div, the movie would still be in the same page and you’d need to somehow remove it from the DOM to unload it. I have no testing to back up my theory but that’s how I figure it works.

@domi – you shouldn’t need to change a thing. I broke backward functionality by changing loop:true to a circular loop by default. I thought about adding another config item, something like “loopMethod = bounce/circular” but decided to leave that to the original author to decide.

Am I missing something here ?
I got the old scrollable version which means i got this:

{foreach item=data from=$productdata}

<!—->
{$data.articlecode} {$data.articlename}
Colour range 1 190*145 mm

{/foreach}

and then i got the code to initialize it :

$(function() {

$(“div.scrollable”).scrollable(
{

interval: 0,

loop: false,

speed: 1000,

size:3
}
);
});

now yours is with a ul element etc…

I do not see my comment from yesterday, so I’ll just resubmit the example:

function scrollTo(position) {
var api = $(“div.scrollable”).scrollable();
api.seekTo(position);
api.reload();
}

now, if you make a call, for example, scrollTo(3) – something funny happens – it scrolls somewhere but not to the 4th item on the list.

Hello,

Just to let everybody know that this feature will be part of jQuery Tools 1.1. It will be implemented as scrollable *plugin*. The main scrollable.js is totally ignorant of this new plugin making it a clean separate extension to the main functionality.

Currenlty I’m on a lengthy vacation and these things will be published after about two months.

Comments are closed.