RE: Slide Show
by "Katherine Pollara" <kpollara(at)home.com>
|
Date: |
Fri, 5 Oct 2001 18:54:01 -0400 |
To: |
<pjkmecak(at)snet.net>, "'Veronica Labarca'" <vlabarca(at)uclink4.berkeley.edu> |
Cc: |
"'Web Techniques'" <hwg-techniques(at)hwg.org> |
In-Reply-To: |
snet |
|
todo: View
Thread,
Original
|
|
does anyone know how to do a slide show with images of different sizes?
Kate Pollara
-----Original Message-----
From: owner-hwg-techniques(at)hwg.org
[mailto:owner-hwg-techniques(at)hwg.org]On Behalf Of Paul Kmecak
Sent: Friday, October 05, 2001 1:14 PM
To: Veronica Labarca
Cc: Web Techniques
Subject: Re: Slide Show
Hi, Veronica.
This is a test page I came up with to try starting a slide show with a
few items and loading the rest as the show progresses:
<.html>
<.head>
<.title>Load, Go and Load Some More<./title>
<.script language="JavaScript">
imageArray = new Array();
imageArray[0] = new Image;
imageArray[0].src = "image0.gif";
imageArray[1] = new Image;
imageArray[1].src = "image1.gif";
imageArray[2] = new Image;
imageArray[2].src = "image2.gif";
imageArray[3] = new Image;
imageArray[3].src = "image3.gif";
imageArray[4] = new Image;
imageArray[4].src = "image4.gif";
var ctr = 0;
var notFinishedLoading = true;
function SlideShow()
{
if(ctr>imageArray.length-1)
{
ctr = 0;
}
if(notFinishedLoading)
{
if(ctr<5)
{
idx = ctr + 5;
imageArray[idx] = new Image();
imageArray[idx].src = eval('"image' + idx + '.gif"');
//imageArray.length = idx;
}
else
{
notFinishedLoading = false;
}
}
document['Counter'].src = imageArray[ctr].src;
ctr++;
timerID = setTimeout('SlideShow()',1000);
}
<./script>
<./head>
<.body onload="SlideShow()">
<.img src="image0.gif" name="Counter" id="Counter"><./img>
<.form>
<.input type="button" value="Stop"
onClick="if(timerID!=null){clearTimeout(timerID);timerID=null;alert('imageAr
ray
has ' + imageArray.length + ' elements');}"><./input>
<./form>
<./body>
<./html>
I came up with images of the numbers 0 - 9. Image0.gif through
image4.gif (the first 5) are loaded with the page. As the slide show
goes through the first 5 images, the second 5 are loaded. This way you
can start the show with a few slides so the viewer doesn't have to wait
for all the images to load.
If you load 3 slides to begin with, ctr becomes 33 for the full three
dozen. Of course, you need to name the images as I did, so the names
won't be descriptive, but if they're in a folder like
"images/halloween_costumes", that should help. Have fun!
Paul Kmecak
HWG hwg-techniques mailing list archives,
maintained by Webmasters @ IWA