Tech Tips

On Page Image Gallery

This is a simple gallery with a large, dynamically sized image on page and any number of clickable thumbnails.

Some style information for the large image and the thumbnails. Important is "cursor:hand;" for thumbnails to indicate a clickable link to the viewer.

<STYLE TYPE="text/css">

  .lrg { border-color:CCCCCC; border-width:2px; border-style:solid}
  .thb { border-color:CCCCCC; border-width:2px; border-style:solid;
         margin: 0; 
         cursor:hand; }

</STYLE>

This function sets the large image. It assumes that the image file is in a folder named large under the thumbnail folder.

<SCRIPT LANGUAGE="JavaScript">
  
  function enlarge(img) {
    s = img.src;
    l = s.lastIndexOf('/');
    if (l > 0) {
      x = s.substring(0,l)+"/large/"+s.substring(l+1,s.length);
    } else {
      x = "large/"+s;
    }
    document.largeimg.src=x;
  }

</SCRIPT>

I create the large image with JavaScript to avoid automatic insertion of height and width by my designer program.

<SCRIPT LANGUAGE="JavaScript">

  function CreateLargeIMG(n) {
    document.write('<IMG NAME="largeimg" src="'+n+'" class="lrg">');
  }

</SCRIPT>

This has to be in every thumbnail image definition to make the gallery work.

CLASS="thb" ONCLICK="enlarge(this);"

Create large image at any location in the page. Supply path to image to be displayed initially.

<SCRIPT LANGUAGE="JavaScript">

    CreateLargeIMG("thumbnails/large/InitialImage.jpg");

</SCRIPT>