Jquery – custom delay in jQuery (cycle)

jquerytimeout

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>

Best Answer

here is the 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);
    }
Related Topic