So, You Want A SlideShow, Huh?
[The Code] [How It Works]
I've been getting email lately asking how people are setting up multiple image slideshows on their pages. I've seen a lot of these being used on CNN lately. I'm glad for it too. I think the programming is good design.
So, I sat down one Saturday morning and recoded the basic slideshow code and came up with this. Take a look:
The code is a little long, but not that hard to understand, so I'll open it in a second window so you can look at it and refer to this tutorial to understand what's going on.
How It Works
We'll start down in the body section of the code. This is the code that will make up the stuff that actually displays on the page.
<IMG SRC="information.gif" NAME="mypic" BORDER=0 HEIGHT="100" WIDTH="100">
<INPUT TYPE="text" WIDTH="100"
NAME="burns" VALUE="Text For Picture One">
The next element is the text box that will hold the information about the image. It's a basic form element. Notice that the form itself is named "joe" and the text box is named "burns". Again, that'll all become quite important in a moment.
Now off now to the script itself...
img1 = new Image ()
img1.src = "information.gif"
img2 = new Image ()
img2.src = "interference.gif"
img3 = new Image ()
img3.src = "message.gif"
img4 = new Image ()
img4.src = "nervous.gif"
text1 = "Text for Picture One"
text2 = "Text for Picture Two"
text3 = "Text for Picture Three"
text4 = "Text for Picture Four"
We start with setting a variable, "num" to one. You can pretty much figure the rest out on your own. The four images are listed follow a traditional format. After that, the four blips of text that accompany each image are listed. If you decide to alter the code and add more images, that's fine. Just be sure to continue to follow that same format again and again.
Now the fun stuff...
The first function is slideshowUp(). It will post the next picture in line. Remember that variable, "num", that we set above? Well, now we play with it. The lines basically state that num (which started as one remember) gets one added. We then check to see if num equals five. Why? Well, because there is no five. We're only dealing with four images here. If num is five, then we reset it to 1. That's how the function is able to loop around again and again.
Now that we know which number image we're dealing with here, we can post the image and the text that goes along with it.
The first line sets the image name that will go into document.mypic. The eval helps to turn the text in the parentheses into a variable name rather than just text.
The next line sets the text that is to display in the text box. See how it's pointed right at document.joe.burns.value?
Each time you click to activate slideshowUp(), one is added to the value of "num" and the new image and text are posted.
Now we need to go backwards...
This is the same function as above except that it's named slideshowBack(). In addition, instead of adding one to "num", it takes one away. That's why it goes backwards. one more thing, we no longer test to see if the count gets to five. Since we're going backwards, we're interested in if the count gets to zero. If it is 5, then we reset "num" to 4. That's how it can loop over again and again. Everything else is the same.
It's a fairly simple script actually. If you add or take away images, make sure you change out the number that the functions are looking for.
Also, if you simply want the images to scroll through without any text or text box, lose the text box in the code. then, go up into the functions (both functions remember) and remove the line.
You can also delete the text above, but it won't matter. It's never going to be called for so it's not required.
[The Code] [How It Works]