views:

34

answers:

0

This was asked 3 months ago: « 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. »

but if I would prefer to have PREV and NEXT inside a div called "#imager_nav" instead of a pager what do I need to do?

This was the solution with a pager:

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

});