> I've implemented the Jquery.Carousel on our site. I'm stumped on how
> to load content dynamically, however.
Well, this is what I've hacked together. It's mess, and I'm sure
incorrect in many ways. It also doesn't QUITE work how I want it to.
I'd love it if anyone would be willing to jump in and proofread my
logic/syntax.
The goal:
- Implement jCarousels with pre-loaded List Items (in this example, 6).
- Upon reaching the end (or near-end) of items, go fetch some new
items to append (in this case, grabbing 6 more via XML)
- Ideally, show an animation 'loading' while it loads.
My issues:
- I don't understand the callback property. In this example, it's
getting called for on each scroll.
- I can load the extra items, but I can't update the carousel to
scroll to them unless there's a second click on the button.
- I can't get carousels own .add syntax to work. I can only replace
the last LI, rather than append new ones to it (nsee remnant commented
line below).
Any help appreciated!
Here's the script:
$("#mycarousel1").jcarousel({
// Configuration goes here
scroll: carouselNumberToScroll,
itemLastInCallback: appendItemsToCarousel
});
function appendItemsToCarousel(carousel, state){
if(carousel.last == carousel.options.size){
$.get("getMovies.xml",{},function(xml){
$('movie',xml).each(function(i) {
var movieHTML;
var j = carousel.options.size;
movieHTML = '<img src="' +
$(this).find("posterURL").text() + '" width="85" height="128"
class="carouselPoster" />';
movieHTML = movieHTML + $(this).find("title").text() +
' #' + j + '<br />';
movieHTML = movieHTML + $(this).find("releaseDate").text();
//carousel.add(j+1, movieHTML);
var newIndex = (1*j)+1;
$('<li jcarouselindex="' + newIndex + '"
class="regularMovies jcarousel-item jcarousel-item-horizontal
jcarousel-item-'+ newIndex +' jcarousel-item-' + newIndex +
'-horizontal">' + movieHTML + '</li>').appendTo('#mycarousel1');
carousel.options.size = newIndex;
$('#mycarousel1').width($('#mycarousel1').width() + 100);
alert("carousel.options.size = " + carousel.options.size);
});
});
};
};
The current behavior:
On load 3 items in the carousel are loaded (#3 the last item shown)
CLICK next button, items scroll over 2. #5 is now the last item.
CLICK, items scroll over 1 (last item). #6 is now the last item.
That triggers the AJAX call to load and appends the new HTML
CLICK, items scroll one pixel over. #6 is now the last item.
CLICK, items scroll over 2. #8 is now the last item.
-DA
