JQuery Cycle Plugin - Delay Interval Between Slides Question

Question

I'm using jQuery Cycle Plugin for an image slider. What I'm looking for is something like this:

image1.jpg >> fadeout >> hold on the blank frame for a second >> fadein image2.jpg >> repeat

How can I control the delay before the next fade animation starts, or the interval between 2 slide transitions?

I mean when the first slide image completely fades out, I need it to pause for 1 or 2 seconds before the second image actually begins its fadein animation.

** I need to get this to work during when I'm changing slides with the pager or next/prev links.

I've tried turning sync: 0 to stop simultaneous fading transition between 2 slides but not quite what I was looking for.

Any advice will be appreciated, thanks.

Kylar · Accepted Answer · 2011-05-23T01:10:12.777

3

You can define a custom transition which fades out the current slide, waits, and then fades in the next slide.

For a more complete example than below, see: http://jsfiddle.net/QGRv9/1/

$.fn.cycle.transitions.fadeOutWaitFadeIn = function($cont, $slides, opts) {
    opts.fxFn = function(curr, next, opts, after) {
        $(curr).fadeOut(opts.fadeSpeed, function() {
            $(next).delay(opts.delayBetweenFades).fadeIn(opts.fadeSpeed, function() {
                after();              
            });
        });
    };
};

$(function() {
    $('#slideshow').cycle({
        fx: 'fadeOutWaitFadeIn',
        fadeSpeed: 500,
        delayBetweenFades: 2000,
        //The timeout value includes the fade speed (twice) and delay between fades.
        //e.g. For a 3000 ms timeout, use 3000 + 500 * 2 + 2000 = 6000.
        timeout: 6000
    });
});

Note that I'm probably doing something wrong here. The timeout shouldn't have to include the other values. There's also one small issue: The first slide gets shown for 6000ms instead of 3000ms.

edited May 23 '11 at 01:10

answered May 23 '11 at 01:01

Kylar

320
2
4

That's exactly what I'm looking for! Thanks a million Kylar, my hero! – Azure Haze May 23 '11 at 17:32
can I get your e-mail or web-site for a commercial project? – MrSplashyPants May 28 '11 at 15:57
@MrSplashyPants Sorry, I'm not sure what you mean exactly, but you can click my name to see my e-mail if you want to elaborate. – Kylar May 31 '11 at 04:50
Hi, no contact information is available: http://i.imgur.com/LSxri.png Please e-mail me at E2AjffrVoGR4@meltmail.com and I will explain. Thanks! – MrSplashyPants May 31 '11 at 15:09

score 0 · Answer 2 · answered May 21 '11 at 09:11

One way is to insert a blank slide after each image. You can then use the timeoutFn option to give a different timeout value depending on whether the slide is an image or a blank slide.

Here's an example where the images are displayed for 5 seconds and blank slides are displayed for 2 seconds:

http://jsfiddle.net/7jJe3/

<div id="slideshow">
    <img src="image1.jpg" />
    <span></span>
    <img src="image2.jpg" />
    <span></span>
    <img src="image3.jpg" />
    <span></span>
</div>

function timeoutfn(currSlideElement, nextSlideElement, options, forwardFlag) {
    var imgtime = 5000;
    var blanktime = 2000;
    if ($(currSlideElement).is('img'))
        return imgtime;
    return blanktime;
};

$(function() {
    $('#slideshow').cycle({
        fx: 'fade',
        speed: 400,
        timeoutFn: timeoutfn
    });
});

Thanks Kylar, nice workaround. That would really work if I just let the slider run by itself but the problem now is that I need to get the delay to work when I'm changing slides with the pager links (or when I click the next/previous slide button). Will that be possible? — Azure Haze, May 22 '11 at 08:29
Not with this workaround, but have a look at my other answer. — Kylar, May 23 '11 at 01:22

JQuery Cycle Plugin - Delay Interval Between Slides Question

2 Answers2