Question

I’m stuck getting multiple Cycle slideshows (with thumbnails) to work on my blog…. all of the slideshow thumbnails are targeting the first instance of the slideshow on the page, and the captions are the same on all the slideshows.

Have added a var p = this.parentNode but not sure how to pass it through to the onAfter and pagerFactory functions?

Thanks 🙂

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

And the 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

Create a counter to identity each slideshow (and also change the IDs to classes!)

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