jQuery plugin : Fancy Zoom
Author : DFC Engineering
License : GPL
Release version : 1.5
Released on : 2009 September
- Lot of improvements
- Now image really zoom !!
下载地址:Fancy Zoom
Context
This plugin is the jQuery version on the fancy zoom effect. As describe on the fancy zoom web site, this effect is providing a smooth, clean, truly Mac-like effect, almost like it's a function of Safari itself (see the demo below).
As the well famous light box plugin you must encapsulate your thumb images with a link that point to the zoomed image:
Usage
1- Add javascript inclusion in the header of your page
//required <script type="text/javascript" src="js/jquery.js"></script> //optional <script type="text/javascript" src="js/jquery.shadow.js"></script> <script type="text/javascript" src="js/jquery.ifixpng.js"></script> //the plugin it self <script type="text/javascript" src="js/jquery.fancyzoom.js"></script>
2- Add your images
Add your images in the html page, but wrap it with a link to the zoomed version:
<a href="image1.jpg"><img src="image1-small.jpg" alt="" /></a>
3- Finally use the plugin
After it, select the links and call the jQuery Fancy Zoom plugin. See some examples:
<script type="text/javascript"> $(function() { //Set the default directory to find the images needed //by the plugin (closebtn.png, blank.gif, loading images ....) $.fn.fancyzoom.defaultsOptions.imgDir='../images/';//very important must finish with a / // Select all links in object with gallery ID using the defaults options $('#gallery a').fancyzoom(); // Select all links with tozoom class, set the open animation time to 1000 $('a.tozoom').fancyzoom({Speed:1000}); // Select all links set the overlay opacity to 80% $('a').fancyzoom({overlay:0.8}); //New, you can now apply the fancy zoom effect on an image //apply the fancyzoom effect on all images that have the fancyzoom class $("img.fancyzoom").fancyzoom(); }); </script>
Additional information
Options available
- imgDir: The directory to find the images for the plugins (blank.gif, closebox.png ....)
- Speed: The Speed in miliseconds of the animation, if 0 no animation is displayed
- showoverlay: if false, do not show the overlay (true by default)
- overlayColor: The color to use for the overlay (default #OOO)
- overlay: the opacity value for the overlay (default 0.6)
- For msie, use the ifixpng plugin to allow the transparency of the close image, fancy zoom only use ifixpng if it found it.
- The shadow plugin works only for non ie browser, add it in the header of your html page and fancy zoom will display a shadow on the zoomed image.
Compatibility
If you add the ifixpng, ie 6 and ie 7 are full compatible.
But also safari 3 and firefox 2.