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.
FancyZoom 1.1 is a LightBox designed to view images inline without reloading the web page. It provides a smooth, clean, truly Mac-like effect. It’s very simple to implement in the pages of your website and it doesn’t use any JavaScript libraries.
Features include:
- 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
- Browser Support: Safari, Firefox, IE7, and IE6
- Source: http://www.cabel.name/2008/02/fancyzoom-10.html
- Download: http://www.cabel.name/files/FancyZoom%201.1.zip
- Pricing: Free for non-commercial use
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.
Zoomy JavaScript based loosely on Fancy Zoom by Cabel Sasser – Developer John Nunemaker rewrote the original FancyZoom script, making some changes to it such as:
- 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