jQuery plugin : Fancy Zoom

Author : DFC Engineering
License : GPL
Release version : 1.5
Released on : 2009 September
- Lot of improvements
- Now image really zoom !!


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:

Tree 1Tree 2




1- Add javascript inclusion in the header of your page

<script type="text/javascript" src="js/jquery.js"></script>

<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

// Select all links set the overlay opacity to 80%

//New, you can now apply the fancy zoom effect on an image
//apply the fancyzoom effect on all images that have the fancyzoom class


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.


If you add the ifixpng, ie 6 and ie 7 are full compatible.
But also safari 3 and firefox 2.

Copyright © 2007 DFC Engineering. Conditions Générales | Mentions Légales | Nous contacter | Plan de site