Main Page Content
A Javascript image viewer
Rated 0 (Add your rating)
Log in to add a comment
(1 comment so far)
Steve Cook
User since: August 29, 1999
Last login: August 02, 2000
Articles written: 11
The following code is for a generic Javascript image viewer that I have been using in a project.
The project is an HTML based CD-Rom. The CD contains a large amount of images and I wanted a solution to be able to include thumbnail images in a group of pages and link to a larger version of the image. I did not however, want to maintain a large number of extra pages containing the larger images.
Instead I decided to write a dynamic page containing all the required info. At first, I tried sending all the required info to build the page in the QueryString. Hmm, this worked after a fashion, but everything needed URLencoding, the querystrings were a pain to write for each link and it didn't work on all the browsers I tested on.
Then, after discussing the issue on "The List", Jeff Howden came up with the idea that I have implemented in the script below (I would like to stress that this is pretty much his code).
This script takes a single number as an argument (which I have passed from the link by updating a JavaScript variable in an unchanging frame on the site). It then reads values from a set of arrays, which contain all the information required to build up each page.
Using such a method, it is possble to build quite complex dynamic pages, though I feel the method is especially suited to image libraries.
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 the
previous link and display a page Link to the
script 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 pages
master_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 first
magicNum = 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>
