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

Question

I try to show each image a different amount of time shown and thought that I can use the loop plugin, but I can not get it to work, here is the whole 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 $(".slideshow img")matches all five images, and attr () will always return the data-durationfirst.

You will need to use the arguments passed to timeoutFn () :

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

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

Answer 2

timeoutFn : , , . timeoutFn, :

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

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

Answer 3

A link to the attributes of the current slide element works better:

     $('.slideshow ').cycle({ 
       fx:     'fade', 
       speed:  'fast',
       timeoutFn: function (currSlideElement, nextSlideElement, options, forwardFlag) { 
           return parseInt($(currSlideElement).attr('data-duration'));
       }   
     });