jquery - 页面上 jQuery Cycle 的多个实例(并使用 pagerAnchorBuilder 定位现有缩略图)

Question

我无法在我的博客上获取多个循环幻灯片(带有缩略图)......所有幻灯片缩略图都针对页面上幻灯片的第一个实例，并且所有幻灯片上的标题都相同幻灯片。

已添加 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

创建一个计数器来标识每个幻灯片(并将 ID 更改为类!)

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