Search code examples
jqueryajaxjcarousel

jCarousel - update carousel items without page refresh


I'm using the jCarousel plugin for a small gallery page with the itemloadcallback parameter to dynamically load the items on the carousel.

However, I'm not sure if this is possible, but is there a way by which a carousel instance on a page itself can be removed and recreated with new set of items? I am planning to use a filter (select box) on the page at the onchange of which, I would like to generate a new carousel with the filtered list. Any ideas experts?

Thx in advance.

Za


Solution

  • I'd managed to work on it later the same day but was too busy over the past few days to post the solution I came upto. I used the same addItemCallback function that is required to load items dynamically - but on a different event that's bind to the onChange event of the year filter. Well, here it is and I hope it might help a few other trying to implement the same thing:

    function mycarousel_initCallback(carousel) {

      jQuery('#filter_year').live('change', function() {
        jQuery.get(
            'dynamic_ajax_php.php',
            {
                first: carousel.first,
                last: carousel.last+1,
                year:""+$(this).val()+""
            },
            function(xml) { 
                mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
            },
            'xml'
        );
    }); 
    

    }

    The answer would sound too particular to the question (well the question was too particular too) - but the thing I wanted to show is how events from elements outside of the carousel can be tracked and used to manipulate the carousel.

    Cheers!