We’ve lost the idle timer in this version, because we’re not using the idle method.
Put “if (this.idle()) {…}” around the fade code. That will cause it to not perform any fading during the idle period of thirty seconds after the visitor clicks on one of the image links. But we also need to think about what happens if the visitor clicks during a fade. The DIV is faded down to .3 opacity, the visitor clicks on an image link, and then the DIV is going to be stuck at half-fade until the slide show starts again. We need an “else” to reset all of the fade properties when fade is called during an idle period. We’ll need to set done to true, set the opacity back to 1, and set the fadeDirection back to “out”.
this.fadeDirection = "out";
this.fade = function() {
var done = false;
if (this.idle()) {
var opacity = this.imageFrame.parentNode.style.opacity;
if (opacity=="") {
opacity = 1;
} else {
opacity = parseFloat(opacity);
}
if (this.fadeDirection == "out") {
opacity -= .1;
if (opacity <= 0) {
opacity = 0;
this.fadeDirection = "in";
}
} else {
opacity += .1;
if (opacity >= 1) {
opacity = 1;
done = true;
this.fadeDirection = "out";
}
}
} else {
//we are not or are no longer idle
//be done and set opacity back to 1 just in case
done = true;
opacity = 1;
this.fadeDirection = "out";
}
this.imageFrame.parentNode.style.opacity = opacity;
if (opacity == 0) {
this.advance();
}
return done;
}
The slide show will now fade until the visitor clicks, at which point it will immediately unfade. It’ll then wait for thirty seconds before resuming the slide show.
