More jQuery plug-ins: jCarousel and the dreaded window.alert()

Brian Dillard, Wednesday, February 20, 2008 @ 5:14 pm

Photo: Joe Shlabotnik

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 carousel
jQuery('#imageCarousel').jcarousel({
	itemLoadCallback: itemLoadCallback,
	scroll: 1
});

//now recalculate the width of the unordered list
//that makes up the carousel items
jQuery('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().

agile ajax

Comments: 3 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   I have been googling for days. I am so happy to have found someone who has figured out how to force jcarousel to look like anything other than Jan Sorgalla’s demos of just 3 images. Getting any answers on the high volume jquery group has been mostly 0.

   I have found with my very limited javascript that the static carousel examples are simple to modify by modding the css files. But one bug Jan Sorgalla does make references to when someone named Erin brings it up is that static carousels show the images in a stacked bulleted vertical list until everything is ready and then they snap to the container.

   http://xsotek.com/demo8/examples/example.html

   I have tried doing what Jan says

   “Just add
   #mycarousel {
   display: none;
   }
   like its in the dynamic examples.”

   but have succeeded in only display no images in the carousel. There has got to be some kind of show function that goes with this, correct?

   http://xsotek.com/demo8/examples/example2.html

   thanks in advance for any insight you can provide

   Susan

   Comment by somnamblst, Friday, February 29, 2008 @ 7:46 pm

2. 

   I have been googling for days. I am so happy to have found someone who has figured out how to force jcarousel to look like anything other than Jan Sorgalla’s demos of just 3 images. Getting any answers on the high volume jquery group has been mostly 0.

   I have found with my very limited javascript that the static carousel examples are simple to modify by modding the css files. But one bug Jan Sorgalla does make references to when someone named Erin brings it up is that static carousels show the images in a stacked bulleted vertical list until everything is ready and then they snap to the container.

   http://xsotek.com/demo8/examples/example.html

   I have tried doing what Jan says

   “Just add
   #mycarousel {
   display: none;
   }
   like its in the dynamic examples.”

   but have succeeded in only display no images in the carousel. There has got to be some kind of show function that goes with this, correct?

   http://xsotek.com/demo8/examples/example2.html

   thanks in advance for any insight you can provide

   Susan

   Comment by somnamblst, Friday, February 29, 2008 @ 7:48 pm

3. 

   @Susan

   Yes, you would need to add code to your document.ready block BELOW the init code for jCarousel. That code would need to be something like this:

   $(’#myCarousel’).show();

   Comment by Brian Dillard, Monday, March 3, 2008 @ 1:15 pm

Leave a comment