Slide Shows

Slide shows are easily programmed with JavaScript. They are usually done with images, though they can be made with other forms of html.

A Very Simple Slide Show

Slide shows typically use a single image in the body of the html file. The source of this image is changed at intervals.

The JavaScript code must contain:

Here is the simplest slide show I know how to write. The sizing of the images is done by the html. The function setInterval('changeSlide()',t) calls the function 'changeSlide()' at intervals of t milliseconds. Thus the slide show continues indefinitely.

<html>
<head>
<script type=text/javascript>
var source= new Array();
var i=0;
  source[0]="../family/discipleSet.jpg";
  source[1]="../family/jenAdj.jpg";
  source[2]="../family/bro.jpg";
  source[3]="../family/christie.jpg";
  source[4]="../family/toBeHung.jpg";

function changeSlide(){
  document.images.slide.src=source[i];
  if (i< 4) {i++} else {i=0};
} 
</script> </head> <body> <p> <img src="../family/denali.jpg" id="slide" width="50%"> <script type="text/javascript"> setInterval('changeSlide()',2000); </script> </body> </html>

Light Bulb

Preloading Images with the proper width and height.

The next script shows how performance of the slide show can be improved by preloading the images. Images need to be preloaded when they are large, or when they are to be shown in rapid succession. This avoids allows them to download before the show is started, or while it is in progress.

This script also preserves the initial size of the images.

<html>
<head>
<script type=text/javascript>
 var im= new Array();
 var i=0;
   im[0] = new Image(542,362); 
   im[0].src="../family/discipleSet.jpg";

   im[1] = new Image(400,374); 
   im[1].src="../family/jenAdj.jpg";

   im[2] = new Image(329,374); 
   im[2].src="../family/bro.jpg";

   im[3] = new Image(280,374); 
   im[3].src="../family/christie.jpg";

   im[4] = new Image(247,374); 
   im[4].src="../family/toBeHung.jpg";

function changeSlide(){
  document.images.slide.src=im[i].src;
  document.images.slide.width=im[i].width;;
  document.images.slide.height=im[i].height;
  if (i<im.length) {i++} else {i=0};
} 
</script> </head> <body> <p> <img src="../family/denali.jpg" id="slide"> <script type="text/javascript"> setInterval('changeSlide()', 2000); </script> </body> </html>

Light Bulb

More on Slide Shows

Optional Tasks:

  1. Determine the width and height of each image. Should you wish to use JavaScript for this task:
    1. Preload the images:
      im[0]= new Image();
      im[0].src='whatever.gif';
    2. Determine the width and height as image properties, e.g.:
      a = im[0].width
      b = im[0].height
  2. Determine the width and height needed so that slides will fill the available area.
    1. Determine the available width and height.
      c = document.body.offsetWidth
      d = document.body.offsetHeight
    2. Make calculations.
      scrAspect=c/d;
      picAspect=a/b;

      if (a<200) { //small image
      document.images.slide.width=a*2;
      document.images.slide.height=b*2;
      }
      else if(picAspect>scrAspect){ //use entire screen width
      document.images.slide.width=c;
      document.images.slide.height=c/picAspect;
      }
      else { use entire screen height
      document.images.slide.height=d;
      document.images.slide.width=d*picAspect;
      };
  3. Include Buttons to start, stop, and scroll through the slides.
  4. Randomize the order in which the slides are shown. This can be done with one line of code. For example:
    step=Math.round(Math.random()*(num-1));
    where 'step' refers to the next slide to be shown, and 'num' is the total number of slides.
  5. Transition effects between images. These are available for Internet Explorer browsers.
  6. Instead of a transition effect, one could leave a bit of time between images. This can be done by showing a blank image of the background color between each image. For example, here is a Slide Show and its JavaScript Function.

Writing a JavaScript slide show of any length by hand would be tedious. The JavaScript program can be written by a PHP program on the server, thus dispensing with the tedious listing of image source files. Determination of image width and height is quickly and reliably done by PHP, using the function getimagesize('filename').

Slide Shows -- Displaying Html Code

Div's can contain any html content.

When using div's, all div's are included in the body. Their display property is rotated.

Div Slide Show from JavaScriptKit.com

Div Slide Show Explanatory Notes

Slide Show References from the Net

Basic Slide Show from JSKit

Slide Show from India

Basic

Clickable

HSCripts

Jokes