The slide show is set to advance every six seconds, but we also have links along the bottom that let the visitor choose which slide they want to view. If they choose a slide during the slide show, chances are they’re only going to be able to look at it for a few seconds. Let’s make the show pause for about thirty seconds every time the visitor makes a choice.
The first step is to move image selection from the separate “switchImage” function to a method on the gallery object. Separate out the code in “advance” that switches the image into its own method:
function SlideShow() {
this.slides = document.getElementById("images").getElementsByTagName('A');
this.imageFrame = document.getElementById("frame");
this.captionParagraph = document.getElementById("caption");
this.currentSlide = 0;
this.advance = function() {
this.currentSlide++;
if (this.currentSlide >= this.slides.length) {
this.currentSlide = 0;
}
this.displayImage(this.slides[this.currentSlide]);
}
this.displayImage = function(link) {
this.imageFrame.src=link.href;
this.captionParagraph.innerHTML = link.title;
}
}
Test that the slide show still works, and when it does, add a switchImage method:
this.switchImage = function(link) {
this.displayImage(link);
this.lastActionTime = new Date();
return false;
}
And change every instance of “return switchImage(this);” in the HTML to “return gallery.switchImage(this);”. A search and replace on “switchImage” to “gallery.switchImage” should do it.
Make sure that clicking the links still works and that the automatic slide show still works. When they do, add a new method that will check if the page has been idle; this new method will check that a property called lastActionTime was at least 30 seconds ago. It will return true if the page has been “idle” and false if it has not.
this.lastActionTime = new Date();
this.idle = function() {
var now = new Date();
if (now.valueOf() > this.lastActionTime.valueOf() + 30000) {
return true;
} else {
return false;
}
}
Finally, add a new method for the advanceSlide function to call. This function will only advance if the page has been idle.
this.idleAdvance = function() {
if (this.idle()) {
this.advance();
}
}
Replace “gallery.advance();” in the advanceSlide function with “gallery.idleAdvance();”. Now the slide show will only move after 30 seconds of inactivity. You can adjust the three delays used by the system.
1. If you want it to wait five minutes before starting the slide show, change 30000 to 300000 in beginShow. 300,000 milliseconds is 300 seconds, which is 5 minutes.
2. If you want it to wait for one minute of inactivity before restarting the slide show, change 30000 to 60000 in the idle method of SlideShow.
3. If you want it to advance every four seconds instead of every five seconds, change 5000 to 4000 in the advanceSlide function.
Wait for idle time: Dates
There’s a new object in the idle method: the Date object. Date objects contain the current date and time, down to the milliseconds. The method valueOf() returns the date and time of the object as milliseconds, allowing us to easily compare two dates. In the SlideShow, we’re creating a lastActionTime property that contains that last time the visitor manually shifted the slide show. The idle method creates a variable to store the current time (“now”), and then compares that with the lastActionTimeProperty—after adding 30000 milliseconds to lastActionTime.
Greater than
The “>” comparison means “is greater than”. The comparison in the idle method is, “is now in milliseconds greater than the last action time in milliseconds with 30000 milliseconds added to it”.
Wait for idle time: Else
If statements can have an “else” clause that specifies what to do if the comparison condition is not met. Here, if now is not greater than the last action time plus 30 seconds, the line in the else section applies. Thus, the idle method will either return true (the condition is met) or false (the condition is not met).
Related Pages
