outaTiME

In addition to the jQuery UI Tabs plug-in I mentioned in yesterday’s post, I’ve been playing with jCarousel, a fairly mature component for building DHTML and Ajax slideshows out of images or arbitrary markup. Overall, I was impressed enough with jCarousel to build half of my latest piece for IBM developerWorks around it. But despite the component’s many configuration options, I found that I had to do some hacking to bend it to my will. jCarousel can get a little confused when you load dynamic content, especially if that dynamic content includes blocks of markup rather than just individual image files. It miscalculates some widths in its behind-the-scenes DHTML trickery, causing images to load but never appear in the carousel. To get around this problem, I used the brute-force approach of applying a hard-coded width to my carousel:

//build the carouseljQuery('#imageCarousel').jcarousel({	itemLoadCallback: itemLoadCallback,	scroll: 1});

//now recalculate the width of the unordered list//that makes up the carousel itemsjQuery('ul.productImages').css("width","3012px");

That did the trick, but I need to spend some more time figuring out why it occurred in the first place. I’m not convinced it wasn’t a coding error on my part.

My other reservation about jCarousel is the way it reports errors: using a JavaScript alert! Here’s the code, from the library’s pre() method:

if (d == 0) {    alert('jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...');    return 0;}

I noticed this behavior because the same problem that was causing jCarousel to mis-calculate the width of my slideshow was causing this error to get thrown every time I resized the browser window. I didn’t want to mess around with hacking the source code, so again I resorted to brute force:

window.alert = function() {	return;};

In keeping with my New Year’s resolution to be a better participant in the open-source community, I’m going to file tickets with jCarousel developer Jan Sorgalla. But I tend to think libraries intended for the production code of real, live websites shouldn’t report errors with window.alert().