title: jQuery Slider - How to have different times for each image?
body: <p>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  </p>
  
  <p>jQuery</p>
  
  <pre><code>  $(document).ready(function(){
       $('.slideshow ').cycle({ 
         fx:     'fade', 
         speed:  'fast',
         timeoutFn: function () { 
             return parseInt($(".slideshow img").attr('data-duration')) ;
         }   
       }); 
    });    
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>   &lt;div class="slideshow"&gt;
      &lt;img data-duration="5400" src="beach1.jpg" width="200" height="200" /&gt;
      &lt;img data-duration="50" src="beach2.jpg" width="200" height="200" /&gt;
      &lt;img data-duration="50" src="beach3.jpg" width="200" height="200" /&gt;
      &lt;img data-duration="50" src="beach4.jpg" width="200" height="200" /&gt;
      &lt;img data-duration="50" src="beach5.jpg" width="200" height="200" /&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>what am I doing wrong?</p>
  
  <p>Thanks for any help :)<br>
  Liam</p>