Cómo tener varias galerías de ciclo jQuery en la página, sólo un activo?

Question

Me gustaría tener un par de galerías de ciclo en una página, pero sólo uno activo a la vez, y los otros escondidos. Lo ideal es hacer clic en un enlace (miniatura de una lista) activaría la siguiente galería ciclo. ¿Tener sentido? Cualquier persona hecho esto antes? Agradecería consejos, gracias!

Answer 1

Ok, ahora que he visto su sitio web puedo ver que usted va a necesitar algo más flexible ya que tiene cerca de 15 galerías de controlar. Dar a éste un torbellino:

$(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;
    });
});

Answer 2

No probado, pero algo como esto debe ser cercano:

$(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;
    });
});