mountains  |  stuff  |  go  |  hello  

Crossbrowser single page gallery script
 
What does that mean?
Have a bunch of links or thumbnails which link to a single htm page that displays the particular photo choosen.
The script features the way of reffering to the Document Object Model, as reccomended by W3C, and works for Netscape 6 (Mozilla) and Internet Explorer 5 and above.
 
The call
We'll call our single display page display.htm which takes the parameter img for each photo.
All photos are .jpg's and reside in the same folder on the web server. Here's the call to the display page:

display.htm?img=myphoto
 
The code
Here's the javascript that is used on the display.htm page to display our photo. The page contains a img tag with an id of 'tile'.

This function display creates the src for the particular photo referred to by img on the url. The function getParam looks at the url and retrieves the parameter img.
 
function display() { 
var passed = location.search.substring(1); 
var tile = getParam(passed,'img'); 
document.getElementById("tile").src = 'photos/' + tile + '.jpg'; 
return document.getElementById("tile").src; }

function getParam(string,param) { 
var startPos = string.indexOf(param + "="); 
if (startPos > -1) { 
startPos = startPos + param.length + 1; 
var endPos = string.indexOf("&",startPos); 
if (endPos == -1) endPos = string.length; 
return unescape(string.substring(startPos,endPos)); } return ''; }
 
You could sniff the browser a bit to be nice. Photos will not display using this code in older versions of Netscape. 
No function here so this is always executed.
 
var bName = navigator.appName;
var bVer = parseFloat(navigator.appVersion); 
if (bName == "Netscape" && bVer < 5){
alert('Sorry, photos will appear in Mozilla, Netscape 6 and IE 5 browsers'); }
 
All that's left to do is call the function display when the page loads.
 
onload = display;
 
and of course include the img tag in the body of the page with id=tile. Notice there is no reference to image dimensions.
  
<img border="1" id="tile">
 
Test this script here
  
By Andrew Chastell
20/05/2002