custom delay in jQuery (cycle)

How to dynamically change the timeout of the cycle plugin

here is my attempt : page

here is the 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>

$('#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); }

ansaurus

tags:

views:

answers:

custom delay in jQuery (cycle)

related questions