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