Do you need to implement a lightbox that has the zoom effect when it is triggered? Take a look at the following resources! Some of the frameworks used to develop the scripts are JQuery, MooTools, and Prototype.
- Easy to implement (requires just two lines of code in your HTML page)
- Focuses on the smoothest, most polished zooming animation possible
- Preloads full-size images in the background on link mouseover
- Offsets the full-size image from the page by drawing a nice drop shadow under it
- Uses Safari 3’s “box-shadow” feature to draw the drop shadow natively, no images required
jQuery plugin: Fancy Zoom – This is the JQuery version of the FancyZoom script. It comes with a few changes:
- Fixed the overlay bug in IE6
- images are resized if size is bigger than document screen
- FancyZoom can be applied directly on an image, no more link wrapper needed.
- Implementation of box rounded corners
- Works with any HTML (images, text, headings, flash)
- Width and Height of Zoom Box are configurable through optional setting or CSS
The package contains FancyZoom versions for JQuery, MooTools and Prototype.
- Browser Support: Most modern browsers (Firefox 3, Safari, IE7, IE6, Opera 9)
- Source: http://orderedlist.com/articles/fancyzoom-meet-prototype
- Demo: http://orderedlist.com/demos/fancy-zoom/
- Download: http://github.com/jnunemaker/fancy-zoom/tree/master