wonder if anyone can shed any light on a particular issue I'm having with Jcarousel.
I have adapted the "dynamic_ajax_php.php" example to succesfully pull in data using a wordpress query on the database, then I'm sticking all that into xml format, which I then use the above example to read the xml and display in jcarousel.
All is fine and dandy, however there is a niggling issue when the circular and auto options are set.
Bascially if there are not enough items to fill the width of the jcarousel, then it shows blank items for the remainder, until the next auto iteration (bascially the issue is on the initial loadup)
Unfortunately I have to make this jcarousel varying widths so I cant lock the width down.
Anyone got any ideas on how I can make the jcarousel wrap correctly on initial loadup ?
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'm setting the widths of the two css properties in skin.css to;
.jcarousel-skin-ie7 .jcarousel-clip-horizontal {
width: 550px;
height: 77px;
}
.jcarousel-skin-ie7 .jcarousel-container-horizontal {
width: 550px;
padding: 20px 40px;
}
Any help greatly appreciated !
Thanks for looking
