Image Gallery Script

Download the most recent version from the scripts page.

We use this script on eightize.com for all the image galleries. For an example of the script go to any of the gallery pages. The script is completely client-side javascript.

This script is a way to put all the image information into one page, instead of having literally hundreds of very similar pages, as we did in the past. All full size images are referenced by a link to the page that displays them, followed by a query string that gives the path to the image. The script looks through all links in a page to find these and adds them to the list of images. When one of the links is clicked, the script will open a pop-up window that shows the images.

Another element of the script is that the user can save a link to one of the full size image pages, and it will still open that page as if the page existed. When they go to that image directly from a link, there will be no forward or back buttons, because there is no calling page for the script to find the other images in, though.

The reason for the query string instead of plain image links is to make it possible to list all the full size images on the main page without actually linking to them. Initially my approach was to also add the fullsize images onto the page and set display=none, but I dropped that as I could not find out definitively if the image was in fact loaded into the cache, or not, in all browsers. It would not be good to make the browser load them, even if the viewer is only interested in looking at one.

The main downside to the method is that making the links to the images is rather laborious. To help with this I've made a simple helper script.

Since this script is quite large, there is a 'compressed' version (using shrinksafe) gallery.js and the source version with all the comments and legible variable names gallery.src.js. As far as I can tell, shrinksafe is no longer available online. There are other minifiers available. I recommend using a compressed version in live pages.

To set up script:

There are two ways to set up the script. The first way is the way we use it on our site, although the second way is easier.

Method I

Create a definition list with class "imagelist." This will allow you to style the layout later:
```
<dl class="imagelist">
  <dt></dt>
  <dd></dd>
...
</dl>
```

Each preview image in the list is in a definition term:

  <dt><img src="preview.jpg" alt="really nice image"></dl>

Add a link around this preview image with a link to the page that shows the actual image. This link contains a query string that contains the path to the image, and, optionally, the image dimensions. See the helper script below if making these urls is daunting:
```
	 <dt><a href="detailView.html?img=img/niceImg.jpg;w=200;h=400"><img src="preview.jpg" alt="really nice image"></a></dl>
```
The tags used in the url follow a question mark, and are:
- img= followed by the path to the image from the detailView.html file.
- w= followed by the width in pixels.
- h= followed by the height in pixels.
- I recommend using semicolon ; as the field separator - instead of the commonly used ampersand & - because semicolon validates. See also the W3C recommendation.
Multiple images can be shown on a single detail view page. Add multiple img= tags to the query string:
```
<a href="detailView.html?img=img/niceImg.jpg;w=200;h=400;img=img/another.jpg;w=100;h=200">
```
Add a definition description that contains the html that will be added to the image page. It can be plain text, or html. The script takes the contents of the <dd> tag and just inserts it, as is, into the page that shows the image.
```
<dd>A description of the <em>amazing</em> image you are looking at.</dd>
```
OPTIONAL: It is possible to add multiple additional images, that do not have preview images on the main page, but that show up in the 'next' or 'previous' image list. For each additional image that will not be shown, add another <dd> tag, this time with both:
1. an anchor with the same information as described above in the <dt> tag, and
2. followed by either plain text, or a <div> containing the html content that you want to show in the description.
```
  <dd><a href="detailView.html?img=img/niceImgToo.jpg;w=200;h=400"></a>
    <div>This image has no preview, but <em>will</em> be part of the list images.</div></dd>
```
Link the javascript file into the head of the page that shows the large image, and also into either the head, or at the very end of the body tag, of the page with the preview images:
```
<script type="text/javascript" src="gallery.js"></script>
```
Link the stylesheet to the page.
```
<link href="gallery.css" rel="styleSheet" type="text/css">
```
The only really important part of the style sheet is to switch off the definitions in the list, so that they do not display on the main page:
```
.imagelist dd {display: none}
```
Colors, fonts, etc. can be adjusted in the stylesheet. See below for setup of the detail view page.

Method II

Add a link to the page for each image. See 3, 4 & 5 in Method I above for description of the tags. (If a description of the image is needed, add url encoded text after an html= query, or see step 3 below):
```
<a href="detailView.html?img=img/niceImg.jpg;w=200;h=400;html=Description%20of%20the%20image">...</a>
```
Link the javascript file to the detail view page. If you want the script to add onclick events to open a popup window on the links, also link the script to the page with the thumbnails (see step 8 in Method I above).
```
<script type="text/javascript" src="gallery.js"></script>
```
OPTIONAL: The script can look for alt attributes in the first image tag that's enclosed by the link in 1 above and use that as the description text in the popup window, if you also link the script into either the head, or at the very end of the body tag, of the page with the preview images. Note: the script will overwrite any html= query you manually write into a url if you add the script to the preview page.
```
<a href="detailView.html?img=img/niceImg.jpg;w=200;h=400">
  <img src="thumbnail.jpg" alt="Description of the image" width="50" height="50"></a>
```

Detail View Page

This page has two required elements:

Forward and back buttons. Add either links, span elements or images with id's 'nextbutton' and 'backbutton'. If an image or non-link element is used, the script will add a link around that element to add the click functions and set the url for the next pages on.
```
   <a id="backbutton" title="previous image">back</a>
   <a id="nextbutton" title="next image">next</a>
```
A holder for the image(s). Add a span or div element with id 'detailimg' where the images should be added. The script will insert the images inside this element.
```
   <span id="detailimg"></span>
```

Additionally, these items can be added to the page:

A holder for the image description. Add a block level element with id 'picdescription' where the description should be added.
```
   <div id="picdescription"></div>
```
A link to the current image. Add an element with id 'linkthispage':
```
 <a href="#" id="linkthispage">Link to this page</a>
```
A botton to close the detail popup page. Add an element with id 'closewindow'.
```
 <span id="closewindow">close window</span>
```

The Helper Script

'setUpGalleryScript.js' is a quick and dirty script that generates the html needed for the image links. To use it, create a basic html page and link the script inside the body of the page. The script will make a single tag for all the images on the page (as if they are all displayed in a single popup window). Copy and paste this link into the preview image page. This script is not well tested, but works ok in Firefox.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>set up gallery page</title>
 </head>
 <body>
  <script type="text/javascript" src="setupGalleryScript.js"></script>
  <img src="img/campoSLucia.gif" alt="" height="328" width="479" id="testimg">
 </body>
</html>

Customizing

There are a few items that can be changed in the script. I've tried to put clear descriptions into the beginning of the script to explain the settings. Of most interest may be:

reloadPage can be set to 'true' to reload the detail view page instead of using the DOM to replace the image. The advantage of this is that a bookmark saved on the page will bring the user back to exactly this image (ie, the history gets updated correctly).
The settings for the popup window are set in WIN_SETTINGS.
This is quite a large script, especially with all the commenting, so I recommend using a javascript optimizer such as dojo ShrinkSafe or Packer or JSMin on it.

Known Issues

ie/mac and opera: The helper script does not fully work on these two platforms. For them, I have disabled the file picker dialog for picking new images. Line 107 of the script has the rudimentary browser sniffer.

Copyleft

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.