| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |
You can use these links to scroll to individual topics
A simple slide show
Adding captions
Adding link URLs
The most simple slide show is simply an image that changes after a fixed delay. There are no user controls. In the HTML body section, include an <img> tag for the image and be sure to name it:
<img src="images/sea.jpg" width="320" height="240"
name="im1" id="im1" alt="Slide show" />
In the head section, copy in the slide.html template file so that slide.js gets included. Then 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)
true, // Autostart
"images", // Begin list of images
"images/sea.jpg",
"images/sea01.jpg",
"images/sea02.jpg",
"images/sea03.jpg");
//--> </script>
In the <body> tag, include onload="goSlideShows.Init();" and that's all there is to it!
To add a caption, you need to include either a text box or a textarea to display the captions in. The text box or textarea has to be in a form. You need to name the form and the text box/textarea. The text box/textarea has to be named xxxCaption where xxx is a prefix that you choose. Your HTML will look something like this:
<center>
<img src="images/sea.jpg" width="320" height="240"
name="im2" id="im2" alt="Slide show" />
<br /><br />
<form name="f2" id="f2" method="post" action="javascript:void(0)">
<input type="text" size="50" name="fp2Caption" value="" />
</form>
</center>
When you create the slide show object, you have to specify the form name, the prefix you used for the text box/textarea name, and the list of captions to display:
<script type="text/javascript" language="javascript"> <!--
var goS2 = new slideShow (
"im2", // Name in IMG tag
3000, // Delay (1000 = 1 sec)
true, // 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
"f2", // Form name
"fp2"); // Gadget prefix
//--> </script>
In this slide show, each image has a link URL associated with it. If you click on the slide show image or on one of the links below the images, the URL you are taken to depends on which image is displayed. I've included a caption — you can eliminate the "captions" and "form" portion of the slide show object if you don't want captions with your slide show. I've included the text links below the caption just to demonstrate that your link can be separate from your slide show if you want it to be, and to illustrate the different ways you can open URLs.
If you click on the slide show image or on the "(new page)" link, the link opens in a new window (just like target="_blank"). If you click on the "(top)" link, the link takes you out of my frames (just like target="_top"). If you click on the "(this frame)" link, the link is displayed here in this frame (assuming you're looking at my site in frames). If you use either of the bottom two links, use your "back" button to get back (you might have to click it twice because of the way I use frames).
Like I've shown here, the image itself can be a link (that's probably how you'd be most likely to want to use this), or you can use a separate text or image link. In either case, in the <a> tag, specify href="javascript:xxx.Link()" where xxx is the name you gave to the slide show object (I've used goS3 for this one). The link will open in the current window (or current frame, if used within frames). If you want the link to open in a new window, pass the string 'new'. If your site is in frames and you want the link to be displayed in the current window but outside your frames, pass 'top'.
Here's how I defined the <img> and the text box for the captions, as well as the text links:
<center>
<a href="javascript:goS3.Link('new')">
<img src="../../images/but/butrr.gif" width="100" height="20" border="0"
name="im3" id="im3" alt="Slide show" /></a>
<br /><br />
<form name="f3" id="f3" method="post" action="javascript:void(0)">
<input type="text" size="50" name="fp3Caption" value="" />
</form>
<p>
<a href="javascript:goS3.Link('new')">Follow link (new page)</a>
</p></p>
<a href="javascript:goS3.Link('top')">Follow link (top)</a>
</p></p>
<a href="javascript:goS3.Link()">Follow link (this frame)</a>
</p>
</center>
When you create the slide show object, you have to specify the links that correspond to each image:
<script type="text/javascript" language="javascript"> <!--
var goS3 = new slideShow (
"im3", // Name in IMG tag
3000, // Delay (1000 = 1 sec)
true, // Autostart
"images", // Begin list of images
"../../images/but/butrr.gif",
"../../images/but/butzr.gif",
"../../images/but/butpr.gif",
"../../images/but/butbr.gif",
"captions", // Begin list of captions
"Visit my ramblings",
"Visit my Paint Shop Pro pages",
"Visit my photo gallery",
"Visit my bookmarks",
"links", // Begin list of link URLs
"../../ramb/ramb.html",
"../../zdu/home.html",
"../../photo/a.htm",
"../../bkmk/frame.html",
"form", // Begin form info
"f3", // Form name
"fp3"); // Gadget prefix
//--> </script>
This slide show illustrates an additional characteristic. You can specify options for the popup window that comes up if you use 'new'. Use it just like I've shown here — specify yes or no for each of the options, and pixel sizes for the width and height.
<script type="text/javascript" language="javascript"> <!--
var goS4 = new slideShow (
"im4", // Name in IMG tag
3000, // Delay (1000 = 1 sec)
true, // Autostart
"images", // Begin list of images
"../../images/but/butrr.gif",
"../../images/but/butzr.gif",
"../../images/but/butpr.gif",
"../../images/but/butbr.gif",
"links", // Begin list of link URLs
"../../ramb/ramb.html",
"../../zdu/home.html",
"../../photo/a.htm",
"../../bkmk/frame.html",
"popup", // Popup window options
"toolbar=no,location=no,directories=no," +
"status=yes,menubar=no,scrollbars=yes," +
"resizable=yes,width=600,height=300");
//--> </script>
.
.
.
<center>
<a href="javascript:goS4.Link('new')">
<img src="../../images/but/butrr.gif" width="100" height="20" border="0"
name="im4" id="im4" alt="Slide show" /></a>
</center>
This slide show illustrates one way you might use the link capability. Clicking on any image shows the full-size version of the image. In this slide show, I've just resized the images on the display — in practice, you'd have thumbnail versions in the slide show with links to the full-size versions, so that the full-size versions are only downloaded if the user asks for them.
<script type="text/javascript" language="javascript"> <!--
var goS5 = new slideShow (
"im5", // Name in IMG tag
3000, // Delay (1000 = 1 sec)
true, // Autostart
"images", // Begin list of images
"images/sea.jpg",
"images/sea01.jpg",
"images/sea02.jpg",
"images/sea03.jpg",
"links", // Begin list of link URLs
"images/sea.jpg",
"images/sea01.jpg",
"images/sea02.jpg",
"images/sea03.jpg",
"popup", // Popup window options
"toolbar=no,location=no,directories=no," +
"status=yes,menubar=no,scrollbars=yes," +
"resizable=yes,width=360,height=280");
//--> </script>
.
.
.
<center>
<a href="javascript:goS5.Link('new')">
<img src="images/sea.jpg" width="160" height="120" border="0"
name="im5" id="im5" alt="Slide show" /></a>
</center>
| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |