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.
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.
To start, you need to copy the script from the header of this page (or from this page) to the header section of your page. Open the Head Section of your page by clicking the arrow next to the word Head at the upper left corner of the editor window. From the Basic Objects palette, drag a JavaScript object into the head section of the page:
Double-click on the icon you just placed and paste the script into the Script Editor window (don't include the SCRIPT tags). Next, change the number in the line imgCt=6 (second line of the script) to the number of slides you have. If you use a different name for the images or the location where they are stored, you will have to change last line of the script (document.slider.src="images/slide"+thisImg+".jpg").
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 images. Click on the button that will move to the next slide and open the Image Inspector. Click on the Link tab and enter this link address: javascript:newSlide(1). Do the same for the previous graphic using this address javascript:newSlide(-1).
Finally, you will need to change the name attribute for the image itself. Click on the first image itself. In the Image Inspector enter slider in the box next to Name/ID.
