كيف يكون لديك معارض دورة متعددة على الصفحة ، واحدة فقط نشطة؟

Question

أرغب في الحصول على عدد قليل من معارض الدراجات على الصفحة ، ولكن واحدة فقط نشطة في وقت واحد ، والآخرين مخبأة. من الناحية المثالية ، فإن النقر فوق رابط (Thumbnail من قائمة) سيؤدي إلى تنشيط معرض الدورة التالي. منطقي؟ أي شخص فعل هذا من قبل؟ سوف نقدر النصائح ، شكرا لك!

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