This work is licensed under a Creative Commons License.

Javascript Photo Gallery

Example 2: Two Page Gallery

This tutorial (lite) builds a gallery that displays the thumbnails on one page and, when user clicks a thumbnail, a second image detail page is fetched.

If you haven't done so, please read the basic instructions before proceeding since this tutorial modifies that earlier, wonderful work so that it works on two pages instead of one.

Creating the external JavaScript page
Creating the HTML pages
The Image (Detail) page
The Thumbnail page

The complete HTML and JavaScript (combines and cleans-up steps 1-4) or see the completed example gallery for this tutorial

top of page

1. Creating the external JavaScript page

If you read the single-page instructions you know that this Javascript Photo Gallery works by dynamically writing some HTML to certain prepared target areas within the web page. This is no less true for the two-page gallery. Let's also consider the parts of the Javascript:

describe the images that are part of the gallery
describe the behaviors of the gallery
"link" the HTML elements to be targeted by the script
perform some action: write the gallery

All of these steps are still required for a two page gallery and we could put all of this javascript in each page, the thumbnail page and the image page, but it would great if we could conserve some effort -- while avoiding the hassles of keeping two pages in sync if we add or remove some images or want to change the file locations. All this (long winded ramblin) points to a linked javascript page.Let's do this. Create a new page, let's call it myphotos.js. Into this we'll place everything from the previous example except the parts that describe the HTML regions (because the regions are different for the thumbnail page and the image page) and the part the executes the writing of the gallery -- this needs to be placed on the individual pages so it happens at the right time (the script will blow-up if you try to run it without any HTML targets).


  setDefDims( 320, 240 );

  addImg( "1.gif", "Me at base camp" );
  addImg( "2.gif", "so much for boiling the water" );
  addImg( "3.gif" );
  addImg( "4.gif", "" );
  addImg( "5.gif", "", 300, 150 );
  addImg( "6.gif" );
  addImg( "7.gif" );
  addImg( "8.gif" );
  addImg( "9.gif" );
  addImg( "10.gif" );
  addImg( "11.gif" );
  addImg( "12.gif" );

  setImgDir( "images/photos/" );
  setThumbDir( "images/photos/thumbs/" );

  setThumbWidth( 125 );
  setCols( 2 );
  setRows( 4 );

  setSpacer( "images/shim.gif" );
  setLoadingImg( "images/loading-image.gif" );

  setWrap( true );

Everything in place we only need one additional step: this Javascript still thinks it is dealing with a single page for both the thumbs and images. It needs to know the HTML files for each so that when a thumbnail is clicked the image detail page is opened, and so the visitor may navigate from the image detail page back to the thumbnails.

Name the pages something obvious such as thumbs.htm and images.htm. Having choosen the file names add two function calls:


  setThumbPage( "thumbs.htm" );
  setImgPage( "images.htm" );

top of page

2. Creating the HTML pages

Next, prep two HTML files -- one for housing thumbnail functions the other for the image details (use the names you assigned at the end of step 1: thumbs.htm and images.htm). In the header of each page include a link to the common javascript created in step 1.

<html>
  <head>
    <title>My Photo Gallery Thumbnails</title>
    <script type="text/javascript" src="pbtsgallery.js"></script>
    <script type="text/javascript" src="myphotos.js"></script>
  </head>
<body>

<!-- HTML tags go here -->

<script language="javascript" type="text/javascript">
// JavaScript will go here

</script>
</body>
</html>

Be sure you set appropriate titles for both pages!!

top of page

3. The Image (Detail) page

In images.htm (the images' detail page) add some elements:

  <img src="images/spacer.gif" border="0" width="1" height="1"
     id="thephoto">
  <span id="caption"></span>
  <span id="photoinfo"></span>

And the javascript code:

<script language="javascript" type="text/javascript">

  setElementId( "image", "thephoto" );
  setElementId( "info", "photoinfo" );
  setElementId( "description", "caption" );

  writeGallery();

</script>

Before moving on consider how you would like your site visitors to be able to navigate. There's the obvious need to jump between thumbnails and images. But you might want them to be able to move through the gallery's images from the image page. We can do this by adding some anchors and javascript:

<p><a href="javascript:void(gotoFirstPic());">First Photo</a>  |  
  <a href="javascript:void(gotoPrevPic());">Previous</a>  |  
  <a href="javascript:void(gotoNextPic());">Next</a>  |  
  <a href="javascript:void(gotoLastPic());">Last Photo</a>  |  
  <a href="javascript:void(gotoThumbs());">back to Thumbnails</a>
  </p>

Another navigational choice you have is to allow people to click on the image to proceed to the next picture. We do this by on slight modification to our image.

  <a href="javascript:void(gotoNextPic());"><img src="images/spacer.gif" 
    border="0" width="1" height="1"
    alt="click for next picture"
    id="thephoto"></a>

top of page

4. The Thumbnail page

Do the same in thumbs.htm:


<span id="mythumbs"></span>
<p>Page: <span id="thumbindex"></span></p>

And the javascript code:

<script language="javascript" type="text/javascript">

  setElementId( "pages", "thumbindex" );
  setElementId( "thumbs", "mythumbs" );

  writeGallery();

</script>

top of page

Complete HTML and JavaScript

Let's pull it together by showing everything we've done in creating these three files. For clarity some of the spans have been incorporated into paragraph tags to improve the layout.

myphots.js


  setDefDims( 320, 240 );

  addImg( "1.gif", "Me at base camp" );
  addImg( "2.gif", "so much for boiling the water" );
  addImg( "3.gif" );
  addImg( "4.gif", "" );
  addImg( "5.gif", "", 300, 150 );
  addImg( "6.gif" );
  addImg( "7.gif" );
  addImg( "8.gif" );
  addImg( "9.gif" );
  addImg( "10.gif" );
  addImg( "11.gif" );
  addImg( "12.gif" );

  setImgDir( "images/photos/" );
  setThumbDir( "images/photos/thumbs/" );

  setThumbWidth( 125 );
  setCols( 2 );
  setRows( 4 );

  setSpacer( "images/shim.gif" );
  setLoadingImg( "images/loading-image.gif" );

  setWrap( true ); 

  setThumbPage( "thumbs.htm" );
  setImgPage( "images.htm" );

thumbs.htm

<html>
  <head>
    <title>My Photo Gallery Thumbnails</title>
    <script type="text/javascript" src="pbtsgallery.js"></script>
    <script type="text/javascript" src="myphotos.js"></script>
  </head>
<body>

<p>Page: <span id="thumbindex"></span></p>
<span id="mythumbs"></span>

<script language="javascript" type="text/javascript">

  setElementId( "pages", "thumbindex" );
  setElementId( "thumbs", "mythumbs" );

  writeGallery();

</script>
</body>
</html>

images.htm

<html>
  <head>
    <title>My Photo Gallery Image Detail</title>
    <script type="text/javascript" src="pbtsgallery.js"></script>
    <script type="text/javascript" src="myphotos.js"></script>
  </head>
<body>
  <a href="javascript:void(gotoNextPic());"><img src="images/spacer.gif" 
    border="0" width="1" height="1"
    alt="click for next picture"
    id="thephoto"></a>
  <p id="caption"></p>
  <p id="photoinfo"></p>

<script language="javascript" type="text/javascript">

  setElementId( "image", "thephoto" );
  setElementId( "info", "photoinfo" );
  setElementId( "description", "caption" );

  writeGallery();

</script>
</body>
</html>

top of page

Script from PizzaByTheSlice.com. Visit the Javascript tips for instructions and latest version.