Currently, the photo gallery only acts in response to visitor activity. That is almost always the best way to start, and often the best way to stop as well. Let the visitor have control over what happens in their browser. With a photo gallery, however, a slide show might be useful. What would we need in order to make this gallery into a slide show?
1. We need a list of the images. And we have a list of images. JavaScript can access our HTML, and our HTML contains a UL filled with one LI per image.
2. We need to be able to set actions to happen in advance. After we switch to the next image, we don’t want to immediately switch to the image after that—the image would only be onscreen for a fraction of a second. We need to switch to the next image, wait ten or fifteen seconds, and then switch again, and so on.
The first step is to construct a list of the images and pull one of them out to display. Arrays in JavaScript are variables just like any other, but we construct them using the Array statement. For example:
var fruit = new Array('apple', 'banana', 'orange');
Later on, if we want the second fruit, we would use “fruit[1]”. For example, “window.alert(fruit[1])”. Just like with strings, JavaScript starts counting arrays at zero. So if there are three items, the items are item 0, item 1, and item 2.
We could construct our list of images in this way, listing each image in the Array statement. But one of the most important rules of programming is DRY: Don’t Repeat Yourself. We already have a list of the images in the HTML. If there’s some way that our script can access this list, we don’t have to repeat ourselves.
Give the <ul> tag an ID. Call it “images”. The ul tag should look like:
<ul id="images">
Now that the UL has an ID, we can get it using getElementById. Create a new function, “randomImage”.
function randomImage() {
var imageUL = document.getElementById("images");
var aList = imageUL.getElementsByTagName('A');
var aChoice = Math.floor(Math.random()*aList.length);
switchImage(aList[aChoice]);
}
Once you have this function, go to the URL bar of your browser and type “javascript:randomImage()”. Most of the time, the image should change to a random image. (Remember that since we only have six images, sometimes it will randomly choose the image we already have.)
Find all subsidiary elements by tag name
Every element has the ability to produce a list of its descendants. One of the more useful methods that elements have for listing their descendants is “getElementsByTagName”. It provides a list of all elements of that tag name that are contained by this element.
In the randomImage function, the parent element is the UL with the id “images”. After calling getElementsByTagName('A') on that element, we have a list of every A tag contained within that UL. This list is the six images in our image gallery.
Math.random and Math.floor
For certain kinds of programming, random numbers are useful. JavaScript has a Math object with a method (Math.random) that provides a random number from 0 to 1, but never reaching 1 (though it can reach zero). If we multiply that number by the length of a list, we end up with a random number from 0 to the length of the list (but never reaching the length of the list). This number will include decimals, such as 4.149.
Math.floor will remove decimals from a positive number. Applying Math.floor to a random number from 0 to the length of a list will produce a random integer from 0 to one less than the length of the list. For our list of six A tags, it will produce a random integer between 0 and 5.
Once we have that random integer, we pull that item from aList using the square brackets. If aChoice is 3, then aList[aChoice] is the fourth image link.
