I'm trying to create a circular scrolling carousel where I load the data via AJAX (as a JSON object) that way I can let users select what content to display in the carousel.
Anyways, I'm having a difficult time loading data via AJAX. I managed to create a static carousel auto scroll, circular wrapping working. Then created a new carousel with one item, and using 'initCallback', it loads all items via $.getJSON()
I've tried 2 ways but both failed:
1. use "carousel.add(i, val); to replace the 1 values with the 70 values I pulled in via AJAX, but as soon as the auto scroll fires, only the first value is displayed.
2. use $('#jcarousel').html(data). Where data is the HTML list properly formatted. I totally replace the 1 item list with the new 70 item list. Again only 1 item is displayed.
I tried it again by changing my temporary item list to contain 2 values (was just one value before) now I get the same results but 2 items are displayed.
I'm thinking that the number of values in the carousel is initialized before the initCallback is fired.
Any one have an idea how to force jCarousel to update its internal count of values?
Or any experiece getting this to work when you load the items via AJAX?
here is some of my code that might be helpful
$items = array('Could not load items.', "nope still loading");
drupal_add_js(drupal_get_path('module','dcats_carousel') .'/ajax.carousel.js');
$options = array(
'initCallback' => 'dcatsCarouselInit',
'auto' => 15,
'wrap' => 'circular',
);
$theme = 'tango';
drupal_add_css(drupal_get_path('module', 'dcats_carousel'). "/$theme-alter.css", 'module');
$block['content'] = theme('jcarousel', $items, $options, $theme);
//My Javascript file
function dcatsCarouselInit(carousel, state){
$.getJSON(Drupal.settings.basePath + '/carousel', function (data){
$('#jcarousel').html(data.items);
});
}
//output on request for /carousel
function theme_dcats_carousel_print($type = ''){
switch($type){
default:
$items = dcats_carousel_get_model_items();
}
$output = '';
foreach($items as $i => $data){
$output .= "<li class='jcarousel-item-$i'>$data</li>\n";
}
drupal_json(array('items' => $output));
}
Comments
Comment #1
markDrupal commentedI did find a function that sets the number of items in the list. Now it's working but not if I set wrap to 'circular'. However, wrap 'both' works.
Comment #2
markDrupal commentedComment #3
quicksketchThis is now built-in to the 2.x version of the module through Views. Just make a new View, use the "jCarousel" display style, set the wrap to "Circular", then turn on the Views "Use AJAX" option for the display.