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