Filter jcarousel content

Question

Hello!

I don't know if it's a bug or not, but here's my problem: I filter the jcarousel content using jquery. Everything goes ok until i start to use the next/prev buttons. On the default stage of filtering, buttons are working ok, but after i start to filter the content (images) the jcarousel start to work all crazy. For example, if i have 10 images in default state, showing 3 on stage, after filtering (let's say i have only 4 now) if i get to the last picture, the next button it's still enabled and i can scroll another 10-15px area even there is only blank space.

Images that are removed by the filter are going out by fadeOut animation.

I tried to call the jcarousel after every filtering action but i get the same result. In some cases, after i apply the filter, the prev btn. it's not enabled but i can scroll 100-200px area of blank space.

I tried to solve this issue for the last 3 days but i couldn't find the right solution.

Sorry for my english and thanks :-)

Update:

Here's my code maybe it will help understanding the issue:

$(".anim").jcarousel();
$("#menu ul li").click(function() {
    var flt = $('a', this).attr('rel');
    $('.anim li').each(function() {
        if(!$(this).hasClass(flt)) {
            $(this).fadeOut('normal');
        } else {
            $(this).fadeIn('normal');
            }
        });
    return false;
});

The jCarousel structure (.anim) is:

<ul class="anim">
<li class="flt1"><img ... /></li>
<li class="flt1"><img ... /></li>
<li class="flt1"><img ... /></li>
<li class="flt2"><img ... /></li>
<li class="flt3"><img ... /></li>
</ul>

Where flt1..3 are my filters and the 'rel' value of menu links. The filtering works ok.

Answer 1

You need to explicitly tell jCarousel how many items still remain.

For example, here is an anonymous function that I give to the config of jCarousel

function(carousel, state) {

                if (state != 'init') return;

                getProperties(function(properties) {
                    $.each(properties, function(i, property) {
                        carousel.add(i + 1, getPropertyHtml(property));
                    });

               carousel.size(properties.length);



                });

            }

Notice how at the end I have to set the size? What you need to do is find a suitable callback in the configuration, and then set the new length of items.