For performance, slide shows are run on the client. The only interaction with the server is to download each picture in turn.

Picture information is passed to the client as a Javascript array in the (only) page served for the slide show:

var pics = [
     new Pic('/pictures/2009/Seattle/01FJ2995.JPG', 
          'Seattle Sights, My Photos', 
          'Flowers and Insecta', ' ', 3000),
     ...
     new Pic('/pictures/2009/Seattle/01FJ3180.JPG', 
          'Seattle Sights, My Photos', 'Animals of Various Kinds', 
          'Deer inside our camp', 3000),
];

Fields include the picture file name, titles, caption, and an initial value for display time. Thereafter the Javascript code refers to pictures by their index in this array.

Space in the window is allocated with three images--A, B, and C--all of which are initially hidden. Image A is coded like this:

<img id="imageA" class="picimg" style="visibility: hidden;"/>
<div id="holderA" class="capholder">
     <span id="captionA" class="capbody"> </span>
</div>

This Javascript code creates three buffer variables and sets each pointing to one of A, B, or C:

var bufnew;	// the visible buffer
var bufold;	// the buffer that is swapping out of view
var bufload;	// the buffer that is loading

Loading of an image is always done into whichever buffer is the value of bufload. Javascript and DOM make this easy; just set the buffer's src field:

bufload.img.src = pics[n].url;

When the image has finiished loading and the timer has expired, the buffers are rotated so bufnew has the value that was bufload. Then the image is swapped so bufnew is visible and bufold is not. Finally, Loading is started for the next image:

rotate buffers
bufnew.img.style.visibility = "visible";
bufold.img.style.visibility = "hidden";
start loading into bufload