slide show 2
|
 |
|
This script came from the article Invigorate Your Site With JavaScript by Dori Smith
and published in the July, 1999 issue of Macworld magazine.
An extension of the script which displays a series of pictures on a page is one that gives the visitor a slide show to look through at their own pace. If you click on the top arrow you will see the next slide in the order and the lower arrow shows the previous one.
If you are using Adobe GoLive as your web editor, here is how you create this user-directed slide show in that program. If you are using Dreamweaver or another editor, check the manual on how to place this script in your page.
To make this work you will need a collection of pictures all the same size and all named uniformly (in this case called slide1.jpg, slide2.jpg, etc.) and kept in a folder called images in the same folder with the page. You will need to change the number following imgCt to the number of slides you have. If you use a different name or folder you will have to change the pieces in red below.
Next, place the this script in the HEAD section of your page.
The last part involves linking the buttons that control the show. First place the buttons and slide 1 where you want them to be on your page following the usual steps for placing an image. Next make the graphic you want to click on to move to the next slide a link and use this address: javascript:newSlide(1). Do the same for the previous graphic using this address javascript:newSlide(-1).
Finally, you will need to add a name attribute, name=slider, to the image itself. Each page editor has a different way to do that but if you click on the graphic and look at the "inspector" (or whatever your editor calls the window allowing you to change the attributes of the object), you will probably see a box to give the graphic a name. If you want to add the line by hand, here is the HTML line for the graphic:
<IMG SRC="images/slide1.jpg" WIDTH=250 HEIGHT=250 ALIGN=bottom name=slider>
You could place the graphic in your favorite web editor and then go into the code and add the piece in red.
