How to have multiple jquery cycle galleries on page, only one active?

Question

I would like to have a few cycle galleries on a page, but only one active at a time, and the others hidden. Ideally clicking a link (thumbnail from a list) would activate the next cycle gallery. Make sense? Anyone done this before? Would appreciate tips, thank you!

Assuming you mean http://jquery.malsup.com/cycle/ this shouldn't be much of a problem. Did you try yourself? I guess binding a `click()` to the thumbnails and `hide()`/`show()` the correct elements and a few calls to `.cycle('pause')/.cycle('resume')` should do the trick — jitter, Mar 22 '10 at 03:36
Yeah sorry about that, that is the plugin I am using. Thanks for the idea I was trying that but way wrong so you mentioning it I went back with second look and have partly working now. So thanks. :) Still trying to figure a way to do this without a "brute force" approach, to hide all others on click, and show relevant one and switch on click. Know what I mean? Can I do that via selectors in one function? Or need one function call for each? Thank you again! — thatryan, Mar 22 '10 at 05:27
Would you mind peaking at this code? pastie.textmate.org/880555 I put the relevant pieces there, the js I am trying, the thumbnail call, and the gallery div. It seems to work, but resuming is messed up. Wont show images. When it comes back, it ONLY shows the image where it was paused or stopped. Goes through the list blank, then shows it again...? — thatryan, Mar 22 '10 at 06:04

score 3 · Answer 1 · answered Mar 22 '10 at 15:55

Untested, but something like this should be close:

$(document).ready(function() {
    // initialize and hide both slideshows
    $('#gallery1,#gallery2').each(function() {
        var $nav = $('<ul class="gallery-nav">').insertBefore(this);
        $(this).cycle({
            fx:     'slideY',
            speed:  '1000',
            timeout: 6000,
            pager:   $nav,
            pagerAnchorBuilder: function(i) {
                return '<li><a href="#">'+(i+1)+'</a></li>';
            }
        }).cycle('pause').hide();
    });     

    // bind click triggers to show/hide galleries
    $('.gallery1,.gallery2').click(function() {
        var isOne = $(this).is('.gallery1');
        var showId = '#gallery' + isOne ? 1 : 2;
        var hideId = '#gallery' + isOne ? 2 : 1;
        $(hideId).cycle('pause').hide();
        $(showId).show().cycle('resume');
        return false;
    });
});

The cool thing about Mike Alsup answering the question is that there’s a very high probability it’s the right answer. — Mathias Bynens, Mar 22 '10 at 16:41
LOL very true. Scary part is that because of its awesomeness I think I got lost! The galleries starts hidden like they should, but nav for both shows up vertically on right. Clicking the thumbnail link images dont show, gives error in firebug. http://drp.ly/Eu61R Does this make sense? — thatryan, Mar 22 '10 at 20:06

score 1 · Accepted Answer · answered Mar 23 '10 at 00:37

Ok, now that I've seen your website I can see that you'll need something more flexible since you have about 15 galleries to control. Give this one a whirl:

$(document).ready(function() {
    $.expr[':'].gallery = function(a) { return /^gallery\d+/.test(a.id); }

    // initialize and pause the slideshows
    var $gallery = $(':gallery').each(function() {
        var $nav = $('<ul class="gallery-nav">').insertBefore(this);
        $(this).cycle({
            fx:     'slideY',
            speed:   1000,
            timeout: 6000,
            pager:   $nav
        }).cycle('pause');
    });

    var $navs = $('ul.gallery-nav');

    // hide all but first gallery and pager and restart first gallery slideshow
    $navs.not(':eq(0)').hide();
    $gallery.not(':eq(0)').hide()
    $gallery.eq(0).cycle('resume');

    // bind click triggers to show/hide galleries
    var $thumbs = $('#slider_thumbs a').click(function() {
        var index = $thumbs.index(this);
        $gallery.not(':eq('+index+')').cycle('pause').hide();
        $gallery.eq(index).show().cycle('resume');
        $navs.eq(index).show();
        $navs.not(':eq('+index+')').hide();
        return false;
    });
});

Wow Mike, thank you so much for taking the time to figure this out for me. I appreciate it greatly. Works perfect so now I need to study it because I don't understand some of what is happening :) Thank you. — thatryan, Mar 23 '10 at 00:44

How to have multiple jquery cycle galleries on page, only one active?

2 Answers2