Main Page Content
A Javascript Image Viewer
The following code is for a generic Javascript
image viewer that I have been using in aproject.The project is an HTML based CD-Rom. The CD
contains a large amount of images and I wanted asolution to be able to include thumbnail images ina group of pages and link to a larger version ofthe image. I did not however, want to maintain alarge number of extra pages containing the largerimages.Instead I decided to write a dynamic page
containing all the required info. At first, Itried sending all the required info to build thepage in the QueryString. Hmm, this worked after afashion, but everything needed URLencoding, thequerystrings were a pain to write for each linkand it didn't work on all the browsers I testedon.Then, after discussing the issue on "The
List", Jeff Howden came up with the idea thatI have implemented in the script below (I wouldlike to stress that this is pretty much hiscode).This script takes a single number as an
argument (which I have passed from the link byupdating a JavaScript variable in an unchangingframe on the site). It then reads values from aset of arrays, which contain all the informationrequired to build up each page.Using such a method, it is possble to build
quite complex dynamic pages, though I feel themethod is especially suited to imagelibraries.Here's the page
<HTML><HEAD><TITLE>Image viewer Javascript</TITLE><SCRIPT LANGUAGE="JavaScript"><!--
// Script developed by Steve Cook (steve@cookstour.org)// From an idea by Jeff Howden (c4wd@triax.com)// Feel free to use and extend :-)/*
This is a script to grab the image name from theprevious link and display a page Link to thescript like so - <A HREF="image_viewer.htm"onClick="parent.frames.hd_main.imgNumPass=6;">And in the frame you use for storing info, have the following;imgNumPass = 0;
It's that simple!*/master_array = new Array();
title_array = new Array();imglocation_array = new Array();dir_array = new Array();text_array = new Array();// Here's an array holding ALL of our image page information
// Simply add new array blocks to add new pagesmaster_array[0] = 0;
title_array[0] = 'Title';imglocation_array[0] = 'image_name.jpg';dir_array[0] = 'production';text_array[0] = 'Some text to accompany the image perhaps?';master_array[1] = 1;title_array[1] = 'Another Title';imglocation_array[1] = 'another_image_name.jpg';dir_array[1] = 'production';text_array[1] = 'Heres another lovely image';var title = '';
var imglocation = '';var dir = '';var text = '';var magicNum = '';// In your link to this page, set a variable imgNumPass
// in another frame firstmagicNum = parent.frames.hd_main.imgNumPass;for(i = 0; i < master_array.length; i++) { if(master_array[i] == magicNum) { title = title_array[i]; imglocation = imglocation_array[i]; dir = dir_array[i]; text = text_array[i]; }}// -->
</SCRIPT></HEAD><BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center"><TABLE WIDTH="600" ALIGN="CENTER" BORDER=0><TR><TD><FONT FACE="Arial, Helvetica" SIZE="3"><DIV ALIGN="center"><SCRIPT LANGUAGE="JavaScript">
<!--document.write ("<H3>" + title + "</H3>");document.write ("<IMG SRC='images/" + dir + "/" + imglocation + "' ALT=" + text + " BORDER=0>");if (text != '') { document.write("<BR CLEAR=all><P><B><I>" + text + "</I></B>");</br>}// --></SCRIPT></TD></TR>
</TABLE></DIV></BODY>
</HTML>
