ENABLING JAVASCRIPT SLIDESHOWS
A.R. Pisarra, SophiaKnows
REV 4: December 2004
This note briefly describes three methods of enabling a JavaScript slideshow. Each of the methods provides certain advantages and liabilities. These are briefly decribed imediately below and in greater detail in the pros/cons suggestion following each of the examples.
The first, which enables an image-only slideshow, is based on the most venerable and common method of switching inline images. The second method adds the ability to insert dynamic text labels (but requires DOM compliant browsers). The third method is the least elegant, but both allows the designer to add annotations to their slide images as well as working in every browser since NS 3.
1. BASIC IMAGE SWAP
The most basic (and common) method of creating a JavaScript slideshow
<head>
<script>
var imagelist=new Array(
"images/slide1.gif",
"images/slide2.gif",
"images/slide3.gif"
)
var counter=0;
function SwapImage(theName,theSource) {
document.images[theName].src=theSource;
}
function NextImage() {
counter=((counter<imagelist.length-1)?counter+1:0);
SwapImage("slide",imagelist[counter]);
}
function BackImage() {
counter=((counter>0)?counter-1:imagelist.length-1);
SwapImage("slide",imagelist[counter]);
}
</script>
</head>
<body onload=SwapImage('slide',imagelist[0])>
<p align=center>
<a href="javascript:BackImage()"><</a>
BACK | NEXT
<a href="javascript:NextImage()"><</a>
</p>
<p align=center>
<img src=images/blank.gif name=slide>
</p>
</body>
1A. THE SWAP
1B. THE COUNTER
PROS: This standard image swap method is a self-contained application that works, more or less, across all browsers and platforms.
In addition, because it only redraws the central displayed image (is in effect a remote scripting application) it eliminates redundant client/server transactions and moreover retains the expected behavior of the browser's back button.
CONS: Conversely, the standard image swap method only permits replacing the central image. As a result, designers cannot include unique annotations for the displayed images. In addition, the much derided NS 4 will display all images in the application with the dimensions of the first image displayed in the page potentially resulting in a distorted display of subsequent images.
2. DOM LABELED IMAGES
Here is the second method which adds dynamic labels to the slideshow. Note that it recycles the core image switch used in method 1 (SwapImage()) but adds a DOM based function to enable the labels.
var imagelist=new Array(
"images/slide1.gif",
"images/slide2.gif",
"images/slide3.gif"
)
var titlelist=new Array(
"Slide 1",
"Slide 2",
"Slide 3"
)
var counter=0;
function SwapImage(theName,theSource) {
document.images[theName].src=theSource;
}
function SwapLabel(labelName,labelText) {
if (document.getElementById) {
document.getElementById(labelName).childNodes[0].nodeValue=labelText;
}
}
function NextImage(counter) {
counter=((counter<imagelist.length)?counter+1:0);
SwapImage("slide",imagelist[counter]);
SwapLabel("label",labellist[counter]);
}
function PreviousImage(counter) {
counter=((counter>0)?counter-1:imagelist.length-1);
SwapImage("slide",imagelist[counter]);
}
PROS: With the exception of univeral browser support, this method has the advantages noted for the first method while adding the ability to insert unique labels for each of the displayed images.
CONS: Owing to the absence of DOM support in, e.g, NS 4- and IE 4-, the image label will break in primitive and non-compliant browsers (although the image swap portion of the script will continue to function as expected).
In addition, owing to an anomaly in Apple's Safari browser, this method will skew the position of a centered annotation1. Here is a variant that will cure that problem (but note that this in turn introduces funhouse behaviors in Mac IE5)
1 The anomaly appears to owe to the fact that Safari does not recalculate the string's left text offset after the initial render. As a result, shorter subsequent strings skew too far left, while longer strings skew right
3. LABELED REDRAW
This method accomplishes the same thing as method 2 (i.e. replaces both the displayed image and annotation). However, unlike both the first and second methods, this method redraws (and re-calls) the full page everytime the user selects one of the slideshow controls.
The downside to this fact is that it consumes a hair more bandwith than the first two methods and results in a jerky animation in some browsers. The upside is that it is well behaved in pretty much every browser not named Lynx.
Note that because the scripts execute when the page is loaded they are not enclosed in functions. Note also that in order to pass state (the location in the slideshow sequence) the zero based index of the image is appended as an integer to the document query string
<script>
var counter=document.location.search.substring('1');
counter=((counter!="")?counter:0);
var backControl="<a href=?"+((counter>0)?counter-1:imagelist.length-1)+"><</a>";
var nextControl="<a href=?"+((counter<imagelist.length)?counter+1:0)+">></a>";
var activeImage="<img src='"+imagelist[counter]+"'>";
var activeLabel=labellist[counter];
</script>
<p align=center>
<script>
document.write(backControl);
</script>
BACK | NEXT
<script>
document.write(nextControl);
</script>
</p>
<p align=center>
<script>
document.write(activeImage);
</script>
</p>
<p align=center>
<script>
document.write(activeLabel);
</script>
</p>