I wonder if anyone can shed some light on the specific question that I have with Jcarousel.
I applied the dynamic_ajax_php.php example to successfully retrieve data using a wordpress query in the database, then I paste it all into the XML format, which then uses the above example to read xml and display in jcarousel.
Everything is fine and dandy, however there is a problem with touching when the circular and automatic parameters are set.
If there is not enough elements to fill the width of the jcarousel, then it shows the empty elements for the remainder, until the next automatic iteration (mainly the problem is with the boot)
Unfortunately, I have to make this jcarousel a changing width, so I cannot block its width.
Anyone have any ideas on how I can properly handle jcarousel on boot?
function mycarousel_itemLoadCallback(carousel, state) { // Check if the requested items already exist if (carousel.has(carousel.first, carousel.last)) { return; } jQuery.get( 'mediabox/write.xml', { first: carousel.first, last: carousel.last }, function(xml) { mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml); }, 'xml' ); }; function mycarousel_itemAddCallback(carousel, first, last , xml) { // Set the size of the carousel carousel.size(parseInt(jQuery('totalGalleryItems', xml).text())); jQuery('imagePath', xml).each(function(i) { carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text())); }); }; /** * Item html creation helper. */ function mycarousel_getItemHTML(url) { return '<img src="' + url + '" width="75" height="75" alt="" />'; }; jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ auto: 4, wrap: 'circular', // Uncomment the following option if you want items // which are outside the visible range to be removed // from the DOM. // Useful for carousels with MANY items. // itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }}, itemLoadCallback: mycarousel_itemLoadCallback }); });
As a test, I set the width of two css properties in the skin.css file:
.jcarousel-skin-ie7 .jcarousel-clip-horizontal { width: 550px; height: 77px; } .jcarousel-skin-ie7 .jcarousel-container-horizontal { width: 550px; padding: 20px 40px; }
Any help is much appreciated!
Thanks for watching