jQuery Fancy Zoom Plugin

Changelog

October 2008: new version 1.4

• Correct the overlay bug in ie6
• You can now apply the plugin to an image, no need more a link wrapper
  $('img.fancyzoom').fancyzoom();

11 April 2008 : version 1.1

• Correct a bug in the close button placement
• Add a title option, read from the image alt

September 2009 : version 1.5

• Lot of improvment
• Now image get out of its context

What ?

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).

How ?

As the well famous light box plugin you must encapsulate your thumb images with a link that point to the zoomed image:

1- Add javascript inclusion in the header of your page

Zorg dat de gedownloade bestanden in de map [js] staan en dat de map in de root staat van je website. De verwijzing naar de scripts moeten kloppen en is afhankelijk van de plaats van de pagina of template!
src="../js/jquery.js" ../ staat voor root /js is de map js bestand.js is het javascript bestand.

<! required -->
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.dimension.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>			
			

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='../js/resources/'; //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 rev > 1.2
	//apply fancyzoom effect on all image whose class is fancyzoom !!
	$('img.fancyzoom').fancyzoom();


});
</script>

Plugin in action

Click on the image to see the zoomed version.

Images are zoomed from the place they are as in the mac osx dock.
While loading the image, a png animation shows to the user that image is loading.

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)
• imagezindex: the zIndex of the image (default 100)

• 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 an overlay.

Compatibility

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

Contact author

• mvilaplanaarobasedfc-e.com
• http://www.dfc-e.com