JQuery Cycle Plugin - Delay Interval Between Slides Question - delay

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.

Answer 1

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.

Answer 2

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
});
});