So, You Want A SlideShow, Huh?

By Joe Burns

Use these to jump around or read it all...
[The Effect]
[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.

The basic concept is that instead of having ten different images all on one page, you set up a JavaScript that only displays one image. The user then sees the remainder of the images by clicking on buttons or text. It's a slideshow.

The Effect


I've actually had the code to do a basic slideshow in my JavaScript Primers for a while. The problem is that the CNN slideshows, the shows that everyone wants, do a whole lot more than mine does. Mine simply showed the next image and then recycled. The CNN slideshows did a lot more including going backwards through the images and posting text.

So, I sat down one Saturday morning and recoded the basic slideshow code and came up with this. Take a look:


Back            Next


Right now it's only moving through four images. Of course, you can set it to show as many or as few as you'd like. Let's get to the code and how it works.

The Code


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.

The Code

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">

<FORM NAME="joe">
<INPUT TYPE="text" WIDTH="100"
NAME="burns" VALUE="Text For Picture One">
</FORM>

<A HREF="JavaScript:slideshowBack()"> Back</A>

<A HREF="JavaScript:slideshowUp()"> Next</A>

OK, it's all fairly basic stuff. We begin with an image command set to a specific height and width. The SRC is the SRC of the first image you want to display. After that, the JavaScript will take over and post the images for you. The IMG tag is also given a name, "mypic". That will become important in a while.

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.

Finally we have two sets of text set up to trigger two JavaScript functions, slideshowBack() and slideshowUp().

Now off now to the script itself...

At the top of the script is the obligatory <SCRIPT LANGUAGE="JavaScript"> statement. Then we offer the script some stuff to play with:

var num=1
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...

function slideshowUp()
{
num=num+1
if (num==5)
{num=1}
document.mypic.src=eval("img"+num+".src")
document.joe.burns.value=eval("text"+num)
}


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...

function slideshowBack()
{
num=num-1
if (num==0)
{num=4}
document.mypic.src=eval("img"+num+".src")
document.joe.burns.value=eval("text"+num)
}


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.

That's That


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.

document.joe.burns.value=eval("text"+num)

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.

Enjoy!

[The Effect]
[The Code] [How It Works]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •