[jQuery] jCarousel - mixed items width problem
Hi, I have problem with firstly loading of jcarousel. The UL
#mycarousel width is shorter like width of all items. This problem is
only by first loading. After refresh display jcarousel correctly.
This is HTML:
<ul id="mycarousel" class="jcarousel-skin-tango"> <li><img
src="index_files/tn_s0000.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn_41000.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn_40-10.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn_54000.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn_55000.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn__dsc1.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn__dsc2.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn__dsc3.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn__dsc4.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn_1-200.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn_2-200.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn_p0000.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn_14000.jpg" class="thumbnail" title="zoom"
alt="" /></li>
<li><img src="index_files/tn_5-100.jpg" class="thumbnail" title="zoom"
alt="" /></li>
</ul>
This is javascript:
function initCallbackFunction(carousel)
{
for (var i = 1; i <= carousel.size(); i++) {
$("#mycarousel").width(($('ul#mycarousel .jcarousel-item-' +
i).width()) + $("#mycarousel").width());
}
};
$(document).ready(function() {
jQuery('#mycarousel').jcarousel({
initCallback: initCallbackFunction
});
});
Have enybody the same problem?
Here is example: http://www.jcarousel.rockstudio.sk/
Thanks
Syoox