Fancy Zoom by John Nunemaker

This works with any html (images, text, headings, flash). The only caveat is it doesn't currently work with AJAX. Whatever you want to zoom to must be html already on the page. Below are several examples. Width and height of zoom box are configurable through optional setting or css.

Demos

Images

It's true, they do bite!

Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Here is a medium box blandit rhoncus. Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac, ante. Here is a large box. Morbi sit amet mi. Ut magna. Curabitur id est. Nulla velit. Sed consectetuer sodales justo. Aliquam dictum gravida libero. Sed eu turpis. Nunc id lorem. Aenean consequat tempor mi. Phasellus in neque. Nunc fermentum convallis ligula. You can even embed flash.

Here is a medium box

The width and height of this box are set in the options for this fancy zoom. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.

Here is a large box

The width and height for this box are inferred from css. See the style tag in the <head> of this document. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.

Installation

Add the following scripts and checkout the notes below (or view the source of this 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>

Notes

new FancyZoom(id) where id is the id of the tag you would like to zoom. The 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>