I'm headed off to dinner, now. So probably my last email of the day. This has turned into quite the saga, hasn't it?
I understand your frustration. I've been there myself. I can see you're reading the examples. I didn't know if maybe you hadn't read the one on external controls. The answers are all there. But I remember when it was greek to me, too, and I just wished that someone would tell me what to do. To some extent, this is how you earn your chops. So you have my kudos for soldiering through.
That said, here's what you need to do. This is quick, and sketchy.
Drupal.behaviors.mymodule = function (context) {
// Initialize jcarousel var carousel = $("#profile-carousel").jcarouse({ itemLoadCallback: mycarousel_itemLoadCallback, vertical: true }
// Now that the carousel is initialized and loaded, bind the // a function to the select element.
$("#award-type-filter").change(function(){
// Get the carousel. This is in the docs, but it's never // worked for me. If it doesn't work for you then I'm pretty // sure you can just use the var you set above. It should still // have scope here
// var carousel = jQuery('#profile-carousel').data('jcarousel');
// There is a method in there to clear the carousel of all its // its items. It may be .clear(). You can console.log(carousel) // above to inspect the methods there, or you can examine the // jcarousel js file to find it there. Anyway, clear it here.
carousel.clear();
// Now get the new items. This is your ajax stuff, and duplicates // some of what would be in your itemLoad callback. You can refactor // this duplicated code into a utility function, and call that // function both here and in your itemLoad callback.
var xml = $.get('/classification/' + $(this).val(), function(){ // Assuming xml is an array of items to add... $.each(xml, function(i, item){ carousel.add(i+1, item); // i in the function is an index, // counting from 0. but jcarousel // counts from 1. Grrr. });
// Now that the carousel is wiped and repopulated we can reload it // to make things actually happen on the screen.
carousel.reload();
// You may need to send the user back to the beginning.
carousel.scroll(carousel.first); });
});
}
You didn't copy over mycarousel_itemAddCallback. Whatever it does, you can probably just use it right there where I had the ajax stuff. The trick is to clear the carousel, then reload it using carousel.reload(); Use lots of console.log() calls on the variables and the objects you are using. If you console.log() the carousel object itself, you can see lots of cool methods for controling the carousel from your code. Just don't forget: if console is not open then console.log will generate errors. You can think your code is failing when it's not.
What I meant before by trying to rewrite the whole carousel is that it looked like your onchange event was triggering a function called trigger(). But trigger was just calling carousel(). Which is the function that selects an element in the dom and initializes the carousel. You should be doing that only once. Thereafter, you are loading and unloading items against an already initialized carousel.
I really really hope this helps. More than this I cannot do, apart from writing it for you. Let us know how it turns out. And hey. This stuff is hard. You have to crack your head on it. The last time I did a major project with jcarousel I thought I was going to rip my machine from the wall, tie the cable around my neck, and throw the thing out of the window.
On 11/18/2010 05:23 PM, Aldo Martinez Selleras wrote:
I have the examples, all of them, and I have looked all very slowly, but there is no one example like I want :( yours emails I readed slowly too
It's working, just no is it creating a new list of objects, only adding more of this.
I don't want create the complete carousel, only need the list of items!
Are you suggesting me in the onchange event only re-call the function it generate the list items????
Sorry, but my English is not very good!