How to Create A JavaScript Image Viewer How to Create A JavaScript Web Image Viewer | WebReference

How to Create A JavaScript Image Viewer How to Create A JavaScript Web Image Viewer

To page 1To page 2current page

How To Create a JavaScript Image Viewer

If the image is reducing and all four dimensions (left, top, width and height) have hit their target, then the animation engine is stopped by switching off the this.bTicks flag, hiding the full size image and showing the thumbnail again. Expanding images stay active in case the user changes the size of the browser window.


   // if reducing and size/position is a match, stop the tick   

   if ( !this.bExpand && (nHit == 4) )

   { = "hidden"; = "hidden"; = "visible";


      this.bTicks = false;



Finally, if still active, the animation engine schedules another tick a short time in the future.


   if ( this.bTicks )


      var pThis = this;





Now, with this code in place, all that is left is to design the layout of the web page, taking advantage of the extra space resulting from the smaller thumbnail images. Remember to enclose each thumbnail in a link tag to cater for those users who do not have JavaScript.


In this article I have presented a JavaScript class that will manage a pair of images; a full-sized image and its thumbnail. When the user clicks on the thumbnail, the ImageExpander code will enlarge the image until it either fills the browser or reaches its full size – whichever comes first. A second click on the image or clicking on another thumbnail reduces the image back to its original position.


To see a working demonstration of this code, click here.

A little disclaimer:

I have endeavored to make this code as browser compatible as possible, meaning that it’s been tested with the latest versions of Internet Explorer (6.0) and Netscape (7.1) – this accounts for over 80% of users).

About the Author

Guyon Roche is a freelance web developer in London, Great Britain. He specializes in Windows platforms with an interest in bridging the gaps between different technologies, visit for more details. He can be reached via e-mail at

To page 1To page 2current page

Created: March 27, 2003
Revised: July 9, 2004