An image gallery: Always advance

  1. Idle
  2. An image gallery
  3. A new random image

Currently, if the visitor revisits a slide during the slide show, the slide will pause, but it won’t reset itself. If the last slide it displayed was Lochmaben Castle and the visitor clicks on Ancient Sarcophagi, then after thirty seconds the slide show will resume at Lochnaw. This makes sense; there’s no reason to revisit slides we’ve already seen just because we wanted to revisit one of the slides.

However, there is one condition where this doesn’t make sense. Go ahead and reload the page, and before the slide show starts click on Carrick Castle. When the slide show starts, Carrick Castle will fade out… and then Carrick Castle will fade in again. The slide show thinks it needs to go from slide 1 to slide 2, and doesn’t care that we’re already looking at slide 2.

As long as we can assume that there are always at least two unique images, this is an easy fix. In the advance method, we can compare the href of the link to the src of the current image. If they’re the same, just advance again.

this.advance = function() {

this.currentSlide++;

if (this.currentSlide >= this.slides.length) {

this.currentSlide = 0;

}

//if the new slide is the same as the current slide, advance again

if (this.slides[this.currentSlide].href == this.imageFrame.src) {

this.advance();

} else {

this.displayImage(this.slides[this.currentSlide]);

}

}

The advance method calls itself to advance again if it’s about to display the same image that’s already onscreen. This requires that there be at least two unique images. If there’s only one image, it will never stop. It will keep trying to advance to a unique image, and eventually the browser will have to kill it.

  1. Idle
  2. An image gallery
  3. A new random image