RE: Slide Show
by Bob Unger <rbu(at)akula.com>
|
Date: |
Fri, 05 Oct 2001 20:45:52 -0400 |
To: |
<kpollara(at)home.com>, <pjkmecak(at)snet.net>, "'Veronica Labarca'" <vlabarca(at)uclink4.berkeley.edu> |
Cc: |
"'Web Techniques'" <hwg-techniques(at)hwg.org> |
References: |
snet |
|
todo: View
Thread,
Original
|
|
At 06:54 PM 10/5/01 -0400, Katherine Pollara wrote:
>does anyone know how to do a slide show with images of different sizes?
>Kate Pollara
Wouldn't this script load the images regardless of the size? I dont see
any specification for size and width of the image.
Bob Unger
rbu(at)akula.com
>-----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