An image gallery: An endless slide show

  1. Prepare a slide show
  2. An image gallery
  3. Start the slide show

Calling gallery.advance() advances to the next slide—until it reaches the last slide. Then all it does is create an error in your error console. That’s because gallery.currentSlide has gone off the end of the list of A elements. It’s trying to get the seventh, eighth, and so on element out of a list of six elements. This is easily fixed: after incrementing currentSlide, check to see if it’s longer than the list:

this.advance = function() {

this.currentSlide++;

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

this.currentSlide = 0;

}

var link = this.slides[this.currentSlide];

this.imageFrame.src=link.href;

this.captionParagraph.innerHTML = link.title;

}

Test it out again using “javascript:gallery = new SlideShow();” and “javascript:gallery.advance();”, and no matter how many times you call “advance” it will continue cycling. After the last image it will switch back to the first image.

Greater than or equal to

We’ve also just learned one more comparison. The symbols “>=” means “greater than or equal to”. In this example, the comparison is, “is this.currentSlide greater than or equal to this.slides.length?”

  1. Prepare a slide show
  2. An image gallery
  3. Start the slide show