JavaScript Application Cookbook

Potential Extensions

As with nearly any application using DHTML, you can add dozens of things to make the slideshow snappier. I’ll try to keep the list short.

Change Random Slides in AutoPilot

Why not mix things up a bit? Generate a random integer between 0 and slideShow.length-1. Then call setSlide(). Here is what the function might look like:

function randomSlide() {
  var randIdx = Math.floor(Math.rand() * slideShow.length);
  setSlide(randIdx);
  }

Instead of calling changeSlide() in function automate(), call randomSlide():

function automate() {
  imageSwap(slideShow[curSlide].name, curSlide, false);
  randomSlide();
  imageSwap(slideShow[curSlide].name, curSlide, true);
  }

Animated GIFs or Image Rollovers in the Slides

These may be obvious improvements, but they certainly help. Users really like the added interactivity; anything with cool moves and color on a web page (this excludes the pitiful BLINK tag) can spice up the look.

Animate the Slides Themselves

Every slide created in this application remains in one place. At times, you have the “now you see it, now you don’t” slides. But the layers remain in the same place throughout the entire show. Why not have the slides move in from the left or exit right? Or the top and bottom?

I’m opening the door to an entire new application within an application, so I won’t get into the code, but I’ll tell you where you can get a JavaScript toolkit to perform loads of layer effects. Netscape has a library file awaiting your download.

You can find ...