How to...

[vguenichon]

Sorry to ask it here but I didn't find anywhere else to ask... I'm trying to create filters to display elements with a certain class or attribute, in only one carousel. But it's easier to say ;-) In fact, all the li, even the hidden ones, are recorded and the carousel has a the size of all the elements. What I want to do is to load some elements (and hide some others) when clicking on outside controls. Do you think it can be possible to achieve ?

[jsor]

With 0.3 this should be doable. You could use the following items option:

$('.jcarousel').jcarousel({
    'items': function() {
        return this.list().children().not(':hidden');
    }
});

Then hide elements from the outside and call $('.jcarousel').jcarousel('reload'); afterwards.

Jan

[vguenichon]

That does the trick !! Yes it works now, but (yes there's a "but")... It works when I just loaded the elements. If I click on a link to hide some elements and reveal some others, it still works except for the controls. I loose the control ability and clicking on the links I used to scroll just do nothing anymore. But this is a great step in what I'm trying to achieve !! Here's my code :

<div class="jcarousel">
          <ul>
            <li rel="guides">
              <img src="./files/products-overview.png" alt="Antidot Products Overview Guide">
              <a class="link online" href="http://doc.afs-antidot.net/content.html#!breadcrumb-9396/version-7.5" title="Read it online"><span>Online</span></a> <a class="link download" href="http://doc.afs-antidot.net/pdf/Antidot_Products_Overview_Guide.pdf" title="Download the PDF"><span>PDF</span></a>
              <p>Antidot Products Overview Guide</p>
            </li>
<!-- and more li with the same rel attribute but don't want to put it here just for a better reading -->
            <li rel="releaseNotes" style="display:none">
              <img src="./files/cks-integration.png" alt="CKS v7.5 Integration Guide">
              <a class="link online" href="" title="Read it online"><span>Online</span></a> <a class="link download" href="" title="Download the PDF"><span>PDF</span></a>
              <p>Release Notes AFS v7.5</p>
            </li>
<!-- and more li with the same rel attribute but don't want to put it here just for a better reading -->
          </ul>
        </div><!-- jcarousel -->
        <a href="#" class="jcarouselPrevious"><span>Previous</span></a>
        <a href="#" class="jcarouselNext"><span>Next</span></a>

$('.jcarousel').jcarousel({
            'items': function() {
                return this.list().children().not(':hidden');
            }
        });
        $('.jcarouselPrevious').jcarouselControl({
                target: '-=3'
        });
        $('.jcarouselNext').jcarouselControl({
                target: '+=3'
        });
        $(".jcarousel").jcarousel('reload');

        $('.cat').each(function(){
            var which = $(this).attr('rel');
            $(this).click(function(){
                $('.cat').removeClass('currentCat');
                $(this).addClass('currentCat');
                $(".jcarousel li[rel!=" + which + "]").fadeOut('fast');
                $(".jcarousel li[rel!=" + which + "]").parents(".jcarousel-skin-tango").fadeOut('fast', function(){
                    $(".jcarousel li[rel=" + which + "]").fadeIn('fast');
                    $(".jcarousel li[rel=" + which + "]").parents(".jcarousel-skin-tango").fadeIn('fast');
                });
                $(".jcarousel").jcarousel('reload');
            });
        });

[jsor]

Could you post a link where i can see your complete setup?

[vguenichon]

Unfortunately it's on my local development environment... But... I can send you an archive if you want ;-)

Le 14 déc. 2012 à 14:30, Jan Sorgalla a écrit :

Could you post a link where i can see your complete setup?

— Reply to this email directly or view it on GitHub.

[jsor]

If that's the only way, yes ;)

[vguenichon]

Well... done !

[jsor]

Got the files, will look into it later. At first sight, it seems to need some adjustment both in your and jCarousel's code.

[vguenichon]

I think so ! Thanks for taking care of it

Le 14 déc. 2012 à 15:32, Jan Sorgalla a écrit :

Got the files, will look into it later. At first sight, it seems to need some adjustment both in your and jCarousel's code.

— Reply to this email directly or view it on GitHub.

[ghost]

I have same problem with hidden elements http://jsfiddle.net/Varnavsky/kUW58/3/

[jsor]

Ok, i found some time at the weekend to fix this. Use the latest files from the dist/ directory.

@vguenichon: The relevant part you have to change is this:

    $('.cat').each(function(){
        var which = $(this).attr('rel');
        $(this).click(function(){
            $('.cat').removeClass('currentCat');
            $(this).addClass('currentCat');
            $(".jcarousel li[rel!=" + which + "]").fadeOut('fast');
            $(".jcarousel li[rel!=" + which + "]").parents(".jcarousel-skin-tango").fadeOut('fast', function(){
                $(".jcarousel li[rel=" + which + "]").fadeIn('fast');
                $(".jcarousel li[rel=" + which + "]").parents(".jcarousel-skin-tango").fadeIn('fast');
            });
            $(".jcarousel").jcarousel('reload');
        });
    });

You have to ensure that reloadis called after all animations have finished and the list has its final state. For example, move the reloadcall in a callback of the last animation:

    $('.cat').each(function(){
        var which = $(this).attr('rel');
        $(this).click(function(){
            $('.cat').removeClass('currentCat');
            $(this).addClass('currentCat');
            $(".jcarousel li[rel!=" + which + "]").fadeOut('fast');
            $(".jcarousel li[rel!=" + which + "]").parents(".jcarousel-skin-tango").fadeOut('fast', function(){
                $(".jcarousel li[rel=" + which + "]").fadeIn('fast');
                $(".jcarousel li[rel=" + which + "]").parents(".jcarousel-skin-tango").fadeIn('fast', function() {
                    $(".jcarousel").jcarousel('reload');
                });
            });
        });
    });

[vguenichon]

Great !! I thought to put the reload in a callback but it didn't change anything. Did you make some changes in your files ?

Well, a big thank you for taking some of your timeout !!

Valentin

Le 17 déc. 2012 à 10:40, Jan Sorgalla a écrit :

Ok, i found some time at the weekend to fix this. Use the latest files from the dist/ directory.

@vguenichon: The relevant part you have to change is this:

$('.cat').each(function(){
    var which = $(this).attr('rel');
    $(this).click(function(){
        $('.cat').removeClass('currentCat');
        $(this).addClass('currentCat');
        $(".jcarousel li[rel!=" + which + "]").fadeOut('fast');
        $(".jcarousel li[rel!=" + which + "]").parents(".jcarousel-skin-tango").fadeOut('fast', function(){
            $(".jcarousel li[rel=" + which + "]").fadeIn('fast');
            $(".jcarousel li[rel=" + which + "]").parents(".jcarousel-skin-tango").fadeIn('fast');
        });
        $(".jcarousel").jcarousel('reload');
    });
});

You have to ensure that reloadis called after all animations have finished and the list has its final state. For example, move the reloadcall in a callback of the last animation:

$('.cat').each(function(){
    var which = $(this).attr('rel');
    $(this).click(function(){
        $('.cat').removeClass('currentCat');
        $(this).addClass('currentCat');
        $(".jcarousel li[rel!=" + which + "]").fadeOut('fast');
        $(".jcarousel li[rel!=" + which + "]").parents(".jcarousel-skin-tango").fadeOut('fast', function(){
            $(".jcarousel li[rel=" + which + "]").fadeIn('fast');
            $(".jcarousel li[rel=" + which + "]").parents(".jcarousel-skin-tango").fadeIn('fast', function() {
                $(".jcarousel").jcarousel('reload');
            });
        });
    });
});

— Reply to this email directly or view it on GitHub.

[ghost]

In my example http://jsfiddle.net/Varnavsky/kUW58/3/ also no changes.

Sorry. It was my mistake in the example. 'reload' function doesn't call after click on "hide items". Update version http://jsfiddle.net/Varnavsky/kUW58/4/

Thank you for reply.

[jsor]

@vguenichon Yes, see 7fd2f5f2b9d8fe65216024f87c0d395cc0dd6657

[odyright]

hi every body! My name is Odyright...i am a new designer and and I would like to solicit your help. it's about the site: http://www.ignitethemes.com/.....one could he show me a tutorial how to make a slider Jcarousel as indicated in the site?