Home / Programming / javascript / gr / column8

How to Create a JavaScript Image Viewer

Not so long ago, photo collections were stored in photo albums, sometimes with carefully written captions, or as slide shows ready made to strike fear into the hearts of many a social guest. Lately, these photo albums are going high-tech as people put their fondest memories on the web.

 

A quick look through some of these photo album sites indicates that there is some room for improvement in presentation. While there are lots of photo slide show servers on the web – and some that will even store and show your photos for free, the slide-show format limits the size of the images and there is not so much room for personalization. Additionally, it seems that the only other option is to display all the images at full size with a little text accompanying each image. This has three significant disadvantages: with the images being so large there is little room left for layout and the images end up in a long list resulting in a very tall page. Also, the number of bytes making up each image can be quite large, adding to the time taken for the page to download.

 

In this article is an effective solution to this problem. Images are displayed in thumbnail size giving much more room for layout and surrounding text. Also, many images can be seen at once giving the reader a fuller presentation. If readers wish to see more detail on a specific image, they can click on it and it will expand to its full size.

 

The images are presented in the document in thumbnail form as in the following HTML:

 

<a href="spike.jpg" onclick="this.href = 'javascript:void(0);';">

   <img src="spike_thumb.jpg" title="click to expand." style="float:right;"

         onclick="new ImageExpander(this, 'spike.jpg');">

</a>

 

 Notice that the <img> tag displays a thumbnail version of the image. The full size image is only downloaded and displayed when the user clicks on the image. Thumbnail images can be created from their originals by most image processing applications. I have also wrapped the image in a link tag to enable users without JavaScript to view the image. If JavaScript is enabled, the onclick of the link tag disables its own link so that it doesn’t interfere with the JavaScript code.

 

The onclick handler of the thumbnail image creates a new ImageExpander object passing itself and the URL of the full size image as arguments.

 

function ImageExpander(oThumb, sImgSrc)

{

   // store thumbnail image and overwrite its onclick handler.

   this.oThumb = oThumb;

   this.oThumb.expander = this;

   this.oThumb.onclick = function() { this.expander.expand(); }

  

   // record original size

   this.smallWidth = oThumb.offsetWidth;

   this.smallHeight = oThumb.offsetHeight;    

 

   // initial settings

   this.bExpand = true;

   this.bTicks = false;

  

   // insert into self organized list

   if ( !window.aImageExpanders )

      window.aImageExpanders = new Array();

   window.aImageExpanders.push(this);

 

   // create the full sized image and automatically expand when loaded

   this.oImg = new Image();

   this.oImg.expander = this;

   this.oImg.onload = function(){this.expander.onload();}

   this.oImg.src = sImgSrc;

}

 

The ImageExpander constructor takes ownership of the thumbnail object and reassigns the onclick handler to call its own expand. The this.bTicks flag is used to indicate whether or not the animation engine is active. Initially, this value is false as the ImageExpander must wait for the image to download before starting the animation.

 

Once expanded, the image will take up a large portion of the visible area of the browser so to avoid confusion; only one ImageExpander should be allowed to expand at any one time. To enforce this, the ImageExpander inserts itself into an array held in the window object. We’ll see how this is used later.

 

Lastly, the full size image is loaded into a new Image object. The onload handler on the image is set to call the onload method on the ImageExpander.

 

ImageExpander.prototype.onload = function()

{

   this.oDiv = document.createElement("div");

   document.body.appendChild(this.oDiv);

   this.oDiv.appendChild(this.oImg);

   this.oDiv.style.position = "absolute";

   this.oDiv.expander = this;

   this.oDiv.onclick = function(){this.expander.toggle();};

   this.oImg.title = "Click to reduce.";

   this.bigWidth = this.oImg.width;

   this.bigHeight = this.oImg.height;

  

   if ( this.bExpand )

   {

      this.expand();

   }

   else

   {

      this.oDiv.style.visibility = "hidden";

      this.oImg.style.visibility = "hidden";

   }

}

 

Once the image has loaded, the ImageExpander object can display the image in the browser. First a <div> element is created to contain the image. The <div> element is used to position the image on the screen and to handle the onclick event as once the image has grown to full size, the user will want to be able to reduce it by clicking on it again. At this point, the width and height of the full size image can be retrieved, these values will be used to calculate how big to make the image when it is expanded.

 

Now, it is possible that while the image was downloading, the user may have clicked on another thumbnail, so the this.bExpand flag must be tested to see whether to go on with the expansion. If not, the image and its enclosing <div> are quickly hidden from view.

 

ImageExpander.prototype.toggle = function()

{

   this.bExpand = !this.bExpand;

   if ( this.bExpand )

   {

      for ( var i in window.aImageExpanders )

         if ( window.aImageExpanders[i] !== this )

            window.aImageExpanders[i].reduce();

   }

}

 

The toggle method is called by the onclick handler of the full size image. All this function does is to reverse the direction of the image so the users can change their minds if they desire. It is not necessary to start the animation because this function can only be called while the animation is already running. So all that is required is to change the this.bExpand flag and force all other ImageExpander objects to reduce.

[next]