Multiple jQuery Cycle Slideshows on one page, each with image counter

Question

I am trying to make a page which contains multiple instances of a jQuery Cycle Slideshow, each with a image counter, showing which is the current image index, e.g. Image 5 of 7

I run into a problem with making an image index counter show for each slideshow, as well as clicking the images advances all slideshows, instead of the individual one.

Each image slideshow will be in a Wordpress loop, so I dont think its possible to have a unique ID for each slideshow, as a way to specify which slideshow should advance when being clicked on.

Below is my code for the slideshows...

<div class="slideshow">
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach6.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach7.jpg" width="200" height="200" />
</div>
<div id="caption"></div>


<div class="slideshow">
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
</div>
<div id="caption"></div>

and also the js/jquery...

$(function() {
    $('.slideshow').cycle({
        fx:       'fade',
        timeout:   0,
        next: '.slideshow',
        after:     onAfter
    });
});

function onAfter(curr,next,opts) {
    var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
    $('#caption').html(caption);
}

Here is a link to a fiddle I made that illustrates the problem.

http://jsfiddle.net/JUST_ROB/VhcgL/55/

Thinking there should be quite a simple solution for this but need some help with this one. Thank you!

flx flx · Accepted Answer · 2018-04-16T12:53:09

You have 2 problems.

You are using an id twice. (The id global attribute defines a unique identifier (ID) which must be unique in the whole document)
You aren't adding the caption based on the slider.

You have to use a class instead of an id for caption and you need to add the iterator based on the given slider. With jQuery-cycle you can achieve that by using (based on your parameter names) opts.$cont and then grabbing the next elment with the class caption

A Solution would be the following code:

$(function() {
    $('.slideshow').cycle({
        fx:       'fade',
        timeout:   0,
        next: '.slideshow',
        after:     onAfter
    });
});

function onAfter(curr,next,opts) {
    var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount; 
    
    opts.$cont.next('.caption').html(caption);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<div class="slideshow">
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach6.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach7.jpg" width="200" height="200" />
</div>
<div class="caption"></div>


<div class="slideshow">
    <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
    <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
</div>
<div class="caption"></div>

Here as JSfiddle

Multiple jQuery Cycle Slideshows on one page, each with image counter

1 Answers