What we’re really working towards is an automatic slide show, one that can advance through all of the images in the gallery automatically.
Let’s go ahead and make a new function called slideShow. It will start when the window finishes loading, and it will display each of the images in order.
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++;
var link = this.slides[this.currentSlide];
this.imageFrame.src=link.href;
this.captionParagraph.innerHTML = link.title;
}
}
This looks very similar to what we’ve already done, with some odd flourishes I’ll get to in a moment. Test this out using:
javascript:gallery = new SlideShow();
javascript:gallery.advance();
Do the first line (new SlideShow) once. Do the second line as many times as you want. It should advance one slide every time you run it.
What is this?
There is a whole bunch of “this” in this function. Previously, we used “this” to pass an A element to another function. What “this” really means is “the current thing”, and that current thing can be a function as well as an element. In fact, functions in JavaScript look a whole lot like objects. They can contain properties and methods just like HTML elements can and just like the window and the document objects do.
What we’re doing with “this” throughout this function is setting up one methods (advance), and several properties (currentSlide, imageFrame, captionParagraph, and slides). We’ll be using currentSlide to remember which slide was most recently displayed. We’ll use imageFrame and captionParagraph just like we used them in the switchImage function. And we’ll use slides to remember the list of images, so that we don’t have to recreate the list every time we cycle through a slide.
The advance method adds one to the currentSlide property, then gets the A element using that number. When gallery.currentSlide is 3, it will display image and caption from the third A element.
Creating objects
I mentioned earlier that new arrays can be created using “new Array()”. Well, new objects of any kind can be created using “new”. “gallery=new SlideShow()” creates a new SlideShow and puts it in the variable “gallery”.
I gave SlideShow a capitalized name; that’s not required, but it is somewhat standard for naming classes.
And note that there is no “var” in front of “gallery =”. That’s because this needs to be a global variable. We’ll be using it from multiple places on the page by the time we’re done.
Prepare a slide show: ++
There’s one more minor new thing: “++”. When a numeric variable is followed by two plus signs, this “increments” the variable: adds one to it. Adding one to (and subtracting one from) variables is so common that many programming languages include this abbreviated way of doing it. It’s easier to type and see than “this.currentSlide = this.currentSlide + 1”.
The equivalent for “decrementing” a variable by one is “--”. If we wanted the slide show to go backwards, we’d be using “this.currentSlide--”.
Related Pages
