Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
fireworks
images
js
.gitignore
README
TODO.txt
index.html

README

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>
		</div>
		<script type="text/javascript">
			new FancyZoom('small');
		</script>
	
		// 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});
			});
		</script>
	
	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">
			FancyZoomBox.directory = 'http://foobar.com/images/zoom'; // no need for trailing slash
			$(document).observe('dom:loaded', function() {
				new FancyZoom('small');
			});
		</script>
	
Something went wrong with that request. Please try again.