Problem with the example code in the readme on jcarousel_add [#1187916]

hi,

In the readme file there is an example:

 <ul class="mycarousel">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
<?php
jcarousel_add('mycarousel', array('vertical' => TRUE));
?>

I have used the example exactly as mentioned using the body field and using php filter. But I do not get the carousal. The page's javascript seems broken and in the console of firebug I get this message:
jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...
[Break On This Error] (function(i){var q={vertical:false,rtl...rousel", new h(this,a))})}})(jQuery);

I have no idea what does this mean, can somebody please explain this?

Many thanks in advance,
Perry.

Comment	File	Size	Author
#1	jcarousel_readme_example.patch	613 bytes	quicksketch

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

quicksketch

he/him

CreditAttribution: quicksketch commented 14 June 2011 at 18:32

Component:	Code	» Documentation
Status:	Active	» Fixed

File	Size
jcarousel_readme_example.patch	613 bytes

That exact code *could* work, but only if your theme's CSS already includes specific height and width for items. Granted, this means that the code isn't right, since the intention is to use the "default" theme. You can fix the code by adding the name of the skin like this:

<ul class="mycarousel jcarousel-skin-default">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
<?php
jcarousel_add('mycarousel', array('vertical' => TRUE));
?>

I'd suggest taking a look at the help page provided by jCarousel also, as that documentation is more extensive with more examples (and it's written correctly). I've added this tweak to the README.txt documentation so it will be accurate in the next version of jCarousel.