Как иметь несколько галерей цикла jquery на странице, только один активный?

Question

Я хотел бы иметь несколько галерей цикла на странице, но только один активный за раз, а остальные скрыты. В идеале щелчок по ссылке (миниатюра из списка) активирует следующую галерею цикла. Имеют смысл? Кто-нибудь сделал это раньше? Поблагодарите советы, спасибо!

Answer 1

Хорошо, теперь, когда я видел ваш сайт, я могу видеть, что вам нужно что-то более гибким, поскольку у вас есть около 15 галерей для контроля , Дайте этому вихрь:

$(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

непроверенная, но что-то, как это должно быть близко:

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