Technical Lead Thomson Reuters (Markets) LLC US-NY-New York Post A Job | Post A Resume

Developer News Microsoft Shows Off Silverlight 4, IE9 Plans Metasploit Expands Vulnerability Test Framework HyperCard Reborn?

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) )

   {

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

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

      this.oThumb.style.visibility = "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;

      window.setTimeout(function(){pThis.tick();},25);

   }

}

 

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.

Conclusion

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 www.silver-daggers.co.uk for more details. He can be reached via e-mail at guyonroche@silver-daggers.co.uk

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

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

URL: http://webreference.com/programming/javascript/gr/column8/1