Javascript Image Browser

The image pages on this site are run by a set of javascript scripts which you - whoever you are - are welcome to steal. The image browser flips through a list of images using forward and back buttons, and also creates a dropdown menu which can be used to select an individual image from the list.

Works in Netscape 4 or better, and in IE 5 or better.

Download the script and sample files.

Getting Started

What you need:

  • A two-frame page. This consists of a frameset, a content frame and a navigation frame.
  • The script.js file. This is the actual script. You can use a single script file for as many separate galleries as you want.
  • A config.js file containing the list of images to be browsed through.
  • A set of images, in either GIF or JPEG format.

Setting up the HTML pages

  1. Set up a two-frame frameset. You can either use the HTML files in the sample, or create your own. Make sure that your setup includes the following:
    • In the frameset, set the NAME attribute for the content frame to "content" and the NAME for the navigation frame to "navbar".
    • The content frame page should contain an image with the NAME attribute set to "photo".
    • The navigation frame should contain the link elements included in the nav.html sample file (forward and back links, and the form element and associated javascript). It must also contain references in the document header to the config.js and script.js files.
      The rest of these instructions refer to the navigation frame file as navbar.html.
  2. In general, the HTML, script and image files should be in the same folder. If the HTML and script files are stored in different locations, open the file navbar.html in a text editor and locate the following lines:
    <script language="javascript" src="config.js"></script>
<script language="javascript" src="script.js"></script>
    Set the src attribute to the path from the HTML file to the location of the script files, making sure you escape any slash characters with a backslash (for example, "scripts\/script.js").

Configuring the script

  1. Open content.html (or your equivalent content page file) in a text editor. Locate the main image tag, and change the image source and size info to that of the first image that you want to display.
  2. Open index.html in a text editor, and replace the sample page title with the title of your page.
  3. Open config.js in a text editor.
  4. If the navbar.html file is in a different folder than the images, locate the following line:
    var image_loc = "";
    Between the double quotes, enter the path from the navbar.html file to the image files. (For example, this might be "..\/images\/".)
    Again, make sure you escape the slashes as shown in the examples ("\/" for a forward slash).
  5. In the config.js file, use the example entries to add the info for each of your images. The image info looks like this: 
    contents[0] = new Array("texture-with-straw.jpg", 648,451, "Texture with Straw", "");
contents[1] = new Array("eye-smiling.jpg", 504,506, "Smile", " ");
    1. In the first part of the line, contents[0], set the index for this image. The numbering starts at 0. Each entry must be sequentially numbered, with no duplicate numbers (or you'll end up with some entries mysteriously missing).
    2. In the next part (the string that follows the Array section), set the filename. This is case-sensitive, and may either be the relative location from the navbar.html file to the image file, or a full URL (including the http:// part).
    3. The next part, 640,480 sets the image size (width, height). Set this for each of your images.
    4. The next part, "Title" sets the image title. Currently, this appears in the pulldown menu that lists all the images. If you use slashes or quotes in the title, put a backslash before the character. (For example: \' for an apostrophe.)
    5. The last part of the string is a blank field, which is reserved for a description of the image. Currently, information entered in this field is ignored.
  6. Save all your files. To test that the script is working, open index.html in your browser. You should be able to scroll through the images using the forward and back buttons, and select images from the menu.