Data Center Architect The Computer Merchant, Ltd US-MA-chelsea Post A Job | Post A Resume

Developer News News Flash: Adobe Has iPhone Workaround Adobe's Flash 10.1 Goes Mobile (Minus iPhone) A Salute to Visionary CEOs

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 Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

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

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