jQuery Slider - How to have different times for each image?

Question

I am trying to get each image to have a different amount of time shown and thought I could use the cycle plugin but cant seem to get it to work, here all the code

jQuery

  $(document).ready(function(){
     $('.slideshow ').cycle({ 
       fx:     'fade', 
       speed:  'fast',
       timeoutFn: function () { 
           return parseInt($(".slideshow img").attr('data-duration')) ;
       }   
     }); 
  });    

HTML

   <div class="slideshow">
    <img data-duration="5400" src="beach1.jpg" width="200" height="200" />
    <img data-duration="50" src="beach2.jpg" width="200" height="200" />
    <img data-duration="50" src="beach3.jpg" width="200" height="200" />
    <img data-duration="50" src="beach4.jpg" width="200" height="200" />
    <img data-duration="50" src="beach5.jpg" width="200" height="200" />
 </div>

what am I doing wrong?

Thanks for any help :)
Liam

Answer 1

Your call to $(".slideshow img") matches all five images, and attr() will always return the data-duration of the first one.

You'll need to use the arguments passed to timeoutFn() instead:

timeoutFn: function(curr, next, opts, fwd) {
    return parseInt($(opts.elements[opts.currSlide]).attr("data-duration"))
        * 1000;
}

Note that the return value of timeoutFn() is expressed in milliseconds, not seconds.

Answer 2

The timeoutFn callback is passed several arguments: current slide, next slide, options, and a forward flag. You can update your timeoutFn function to look at the current slide:

timeoutFn: function(curr, next, options, forward) {
    return parseInt($(curr).attr('data-duration'));
}

Reference: http://jquery.malsup.com/cycle/options.html