Skip to page content or Skip to Accesskey List.


Main Page Content

A Javascript Image Viewer

Rated 3.89 (Ratings: 0)

Want more?

  • More articles in Code
Picture of Ratface

Steve Cook

Member info

User since: 29 Aug 1999

Articles written: 11

The following code is for a generic Javascript

image viewer that I have been using in a


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


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


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


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


Here's the page



<TITLE>Image viewer Javascript</TITLE>



// Script developed by Steve Cook (

// From an idea by Jeff Howden (

// 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"


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];



// -->




<DIV ALIGN="center">


<TR><TD><FONT FACE="Arial, Helvetica" SIZE="3"><DIV ALIGN="center">



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>


// -->






Everything you ever needed to know about me can be found at

The access keys for this page are: ALT (Control on a Mac) plus: is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.