Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
[DEAD] Zoomy JavaScript based loosely on Fancy Zoom by Cabel Sasser.
tree: 60f6f392de

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


1. Add prototype, scriptaculous and fancy zoom to your page.
	<script type="text/javascript" src="js/prototype.js"></script> 
	<script type="text/javascript" src="js/scriptaculous.js"></script> 
	<script type="text/javascript" src="js/fancyzoom.js"></script> 

2. Start zooming.	
	new FancyZoom(id) where id is the id of the <a> tag you would like to zoom. The <a> tag should have an  href that anchors to the id of the box that contains the contents that should be zoomed. For example:
		<a href="#small_box" id="small">Small Box!</a>
		<div id="small_box">
			<p>Here is the contents that will appear in the zoom.</p>
		<script type="text/javascript">
			new FancyZoom('small');
		// other examples
		<script type="text/javascript"> 
			$(document).observe('dom:loaded', function() {
				$$('a.fancy').each(function(el) { new FancyZoom(el, {width:500, height:300}); });
				new FancyZoom('small');
				new FancyZoom('medium');
				// width and height are optional. defaults to css specifications of width and height. 
				// if width and height are passed in, they override whatever may be in css.
				new FancyZoom('large', {width:600, height:400});
	If the images are not in a directory named 'images' that is relative to the html file you can configure it like so:
		<script type="text/javascript"> = ''; // no need for trailing slash
			$(document).observe('dom:loaded', function() {
				new FancyZoom('small');
Something went wrong with that request. Please try again.