| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev |
You can use these links to scroll to individual topics
Descriptions of controls
Sample slide show
You can add a number of controls to your slide show. You implement these controls by coding calls to the various methods that the slide show supports. You can include any mixture of the controls that you want.
Next and Prev controls display the next and previous image. These controls let the slide show operate as a manual slide show, and they stop the slide show if it is running automatically.
Start and Pause controls start or stop the slide show. You can use separate controls for these two operations, or you can a single control that starts the show if it's not currently running or stops it if it is running. If you choose to use the single control and if you use a form button for the control, you can change the label on the button based on the slide show status. For example, you can have it labelled "Start slide show" when the slide show is not running and "Pause slide show" when it is running.
Faster and Slower controls let the user speed up or slow down the slide show.
In addition to these controls, there are two text boxes (or textareas) that you can include. You've already seen using one to display captions. You can also use one to display the delay in seconds between displaying slides.
This slide show has all of the controls, and also has text boxes for displaying the current delay value and for displaying captions. It has both form buttons and text links for controls, although you'd normally choose one or the other. The form has a start/pause toggle button whose label changes based on the state of the slide show. The text links have separate start and stop controls.
This slide show does not start automatically — the user has to start it. You could have it start automatically if you prefer.
Here is the HTML code for the <img> and for the controls. When I created the slide show object, I named it goS1, so that's the name I use in the onclick handlers and in the <a href fields for the controls.
<form name="f1" id="f1" method="post" action="javascript:void(0)">
<img src="images/sea.jpg" width="320" height="240"
name="im1" id="im1" alt="Slide show"
align="left" hspace="10" />
<input type="button" name="fp1Start" value="Loading"
onclick="goS1.StartPause()">
<a href="javascript:goS1.Start()">Start</a>
<a href="javascript:goS1.Pause()">Pause</a>
<br /><br />
<input type="button" value="Next"
onclick="goS1.Next()">
<input type="button" value="Prev"
onclick="goS1.Prev()">
<a href="javascript:goS1.Next()">Next</a>
<a href="javascript:goS1.Prev()">Prev</a>
<br /><br />
<input type="button" value="Faster"
onclick="goS1.Faster()">
<input type="button" value="Slower"
onclick="goS1.Slower()">
<br /><br />
<a href="javascript:goS1.Faster()">Faster</a>
<a href="javascript:goS1.Slower()">Slower</a>
<br /><br />
Delay:
<input type="text" name="fp1Delay" size="3">
seconds
<br clear="all" /><br />
<input type="text" size="50" name="fp1Caption" value="" />
</form>
And here is the code I used to create the slide show object:
<script type="text/javascript" language="javascript"> <!--
var goS1 = new slideShow (
"im1", // Name in IMG tag
3000, // Delay (1000 = 1 sec)
false, // Autostart
"images", // Begin list of images
"images/sea.jpg",
"images/sea01.jpg",
"images/sea02.jpg",
"images/sea03.jpg",
"captions", // Begin list of captions
"Original image",
"FF gallery T: Enhanced equalizer",
"FF gallery T: Sparkle",
"FF gallery S: Color Metalizer",
"form", // Begin form info
"f1", // Form name
"fp1", // Gadget prefix
"startstop", // Labels for start/stop button
"Start",
"Pause");
//--> </script>
Since I wanted to use a single start/stop button rather than separate buttons and since I wanted the label to change based on the state of the slide show, I included the "startstop" option plus the two labels. I also had to name the button fp1Start (I specified a prefix of fp1 for form gadgets). If you didn't want the label to change, you wouldn't need to name the start/stop button, and you don't need to name separate start and stop buttons if you prefer to use separate buttons.
The text boxes for showing the delay value and for showing captions have to be named xxxDelay and xxxCaption, where xxx is the form prefix you've specified.
You can, of course, use images rather than text links for the controls. If you only use text/image links for your controls and if you don't want to display the delay value or captions, then you don't need to use a form.
| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev |