Несколько экземпляров jQuery Cycle на странице (и нацеливание на существующие миниатюры с помощью pagerAnchorBuilder)

Question

Я застрял, получая несколько слайд-шоу Cycle (с миниатюрами) для работы в моем блоге .... все миниатюры слайд-шоу нацелены на первый экземпляр слайд-шоу на странице, а подписи одинаковы на всехСлайд-шоу.

Добавили var p = this.parentNode, но не знаете, как передать его функциям onAfter и pagerFactory?

Спасибо:)

// Setup cm_cycle_slideshow for each div.slideshow
var $ = jQuery.noConflict();
$('.slideshow #main').each(function(){
    var p = this.parentNode;
    $(this).cycle({
        fx:                    'fade',
        speed:                 500,
        before:                onAfter,
        pager:                 $('#thumbs', p),
        pagerAnchorBuilder:    pagerFactory
    }).cycle('pause');
});

function onAfter(curr, next, opts, fwd){
        // Update the slide caption
        $('#caption').html(this.alt);
        // Get the height of the current slide
        var $ht = $(this).height();
        // Set the container's height to that of the current slide
        $(this).parent().css("height", $ht);
}

function pagerFactory(idx, slide) { 
    return '.slideshow #thumbs span:eq(' + idx + ') a'; 
}

И HTML...

<div class="slideshow">
<div id="main">
<img width="470" height="313" src="blahblahblah.jpg" class="attachment-medium" alt="Camilla Meijer cushions" title="Camilla Meijer cushions" style="position: absolute; top: 0px; left: 0px; z-index: 4; opacity: 0; display: none; ">
<img width="470" height="313" src="blahblahblah.jpg" class="attachment-medium" alt="Camilla Meijer cushions" title="Camilla Meijer cushions" style="position: absolute; top: 0px; left: 0px; z-index: 4; opacity: 0; display: none; ">
<img width="470" height="313" src="blahblahblah.jpg" class="attachment-medium" alt="Camilla Meijer cushions" title="Camilla Meijer cushions" style="position: absolute; top: 0px; left: 0px; z-index: 4; opacity: 0; display: none; ">
</div>
<div id="thumbs">
<span class=""><a href="#"><img width="74" height="74" src="blahblahblah.jpg" class="attachment-shop_thumbnail" alt="Caption here"></a></span>
<span class=""><a href="#"><img width="74" height="74" src="blahblahblah.jpg" class="attachment-shop_thumbnail" alt="Caption here"></a></span>
<span class=""><a href="#"><img width="74" height="74" src="blahblahblah.jpg" class="attachment-shop_thumbnail" alt="Caption here"></a></span>
<div id="caption">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing.</div>
</div>
</div>

Answer 1

Создать счетчик для идентификации каждого слайд-шоу (а также изменить идентификаторы на классы!)

// Setup cm_cycle_slideshow for each div.slideshow
var $ = jQuery.noConflict();
var counter = 1;
$('.slideshow .main').each(function(){
    $(this).parent().attr('id','slideshow_'+counter);
    var p = $(this).parent();
    $(this).cycle({
        element: counter, 
        fx:                    'fade',
        speed:                 500,
        before:                onAfter,
        pager:                 $('.thumbs', p),
        pagerAnchorBuilder:    function (idx, slide) {
            //console.log('#slideshow_'+counter+' .thumbs span:eq(' + idx + ') a')
            return '#slideshow_'+counter+' .thumbs span:eq(' + idx + ') a'; 
        }
    }).cycle('pause');
    counter++;
});

function onAfter(curr, next, opts, fwd){
        // Update the slide caption
        $('#slideshow_'+opts.element+' .caption').html(next.alt);
        // Get the height of the current slide
        var $ht = $(this).height();
        // Set the container's height to that of the current slide
        $(this).parent().css("height", $ht);
}

Answer 2

Я только что пропустил всю работу с постраничным редактором, это очень громоздко и дает вам очень ограниченный контроль.Это гораздо лучший вариант.

Сначала создайте свой цикл Cycle и лоток для большого пальца, как это.Теперь у вас есть намного больший контроль над большими пальцами.

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

Затем используйте этот JS, чтобы связать миниатюры со слайдами.По сути, ссылки большого пальца 1 на слайд 1 и т. Д.

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage on click
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

Это будет работать с несколькими галереями циклов на странице без проблем!Плюс это намного проще, чем ответ, приведенный выше.

Answer 3

Вероятно, это проблема с несколькими дублирующимися идентификаторами на странице.