Hoe ?

1- Voeg javascript verwijzing toe aan de header van je pagina;

//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- Afbeeldingen toevoegen

Voeg afbeeldingen toe in de html page, en 'wrap' het met de gezoomde afbeelding:

<a href="image1.jpg"><img src="image1-small.jpg" alt="" /></a>

Finally use the plugin

Aan de header kunnen de volgende functies toegevoegd worden. Met name de eerste functie, de plaats van buttons is van belang dat deze goed geadresseerd worden. Bekijk enkele voorbeelden:

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


});
</script>
			

Plugin in actie

Klik op de afbeelding om de gezoomde afbeelding te bekijken;

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)

Compatibility

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