SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Image Gallery
By Scott Isaacs

This demonstrates how to create an image gallery where the user can click and expand the image to see its full size.

The code for this example can be pasted into any HTML document. It automatically makes all the images zoom to twice their original size.


Rover, our favorite robot!

Code

  function zoomImage() {
    with (event.srcElement) {
      // Test if the user clicked on an image
      if ("IMG"==tagName) {
        // Test if this image has been zoomed.
        if (null==event.srcElement.zoomed)
          event.srcElement.zoomed=false // Initialize
        zoomed = !(zoomed)
        // Scale the image.
        if (zoomed) {
          width*=2; 
          height*=2;
        }
        else {
          width*=.5; 
          height*=.5;
        }
      }
    }
  }
  document.onclick = zoomImage;
Discuss and Rate this Article