2009-11-03 2 views
1

Comment modifier dynamiquement le délai d'attente du plug-in du cycleretard personnalisé dans jQuery (cycle)

voici ma tentative: page

est ici le code:

<script type="text/javascript"> 

$(function() { 

    $('#delais').val(3); 

    $('#plus').click(function(){$('#delais').val(parseInt($("#delais").val()) + 1)}); 
    $('#moins').click(function(){$('#delais').val(parseInt($("#delais").val()) - 1)}); 

    startSlideshow(<?php echo json_encode(glob("*.jpg"));?>); 

    function startSlideshow(slides) { 

     $('#slideshow').append ('<img src="'+slides.shift()+'" />'); 
     $('#slideshow').append ('<img src="'+slides.shift()+'" />'); 

     // start slideshow 
     $('#slideshow').cycle({ 
      fx: 'scrollHorz', 
      timeout: parseInt($('#delais').val()), 
      speed: 1500, 
      prev: '#prev', 
      next: '#next', 
      pager: '#nav', 
      before: onBefore 
     }); 

     function onBefore(curr, next, opts, fwd) { 

      if (!opts.addSlide) return; // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet) 

      if (opts.slideCount == slides.length) return; // have we added all our slides? 

      opts.addSlide('<img src="'+slides.shift()+'" />');// add our next slide 
     }; 
    }; 
}); 
</script> 

<style type="text/css"> 
... some style... 
</style> 
</head> 
<body> 

<div id="dump"><?php var_dump(glob("*.jpg"));?></div> 

<div id="buttons"> 
    <input type="submit" id="prev" value="Précédent"> 
    <input type="submit" id="next" value="Suivant"> 

    <input type="submit" id="plus" value="+"> 
    <input type="submit" id="moins" value="-"> 
    delais : <input type="text" id="delais" value="3" size="3">secondes 
</div> 

<div id="slideshow"></div> 

<div id="nav"></div> 

</body> 
</html> 
+0

Fonctionne bien pour moi - Macinto sh/Safari 4, bien que vous souhaitiez vous assurer que vous ne pouvez pas décrémenter le délai en dessous de 0. – tvanfosson

Répondre

1

ici est la solution:

$('#slideshow').cycle({ 
    fx: 'scrollHorz', 
    timeout: 3000, 
    speed: 1000, 
    prev: '#prev', 
    next: '#next', 
     pager: '#nav', 
     timeoutFn : calculateTimeout, 
    before: onBefore 
}); 

    function calculateTimeout() { 
     var timeout = $('#delais').val(); 
     timeout = timeout * 1000; 
     return parseInt(timeout); 
    }