Since FancyZoom is so easy to add to a web page, I encourage you to give it a try!

Instructions

Installing FancyZoom on your web pages should be dead simple.

1 Download the FancyZoom package, right here:


FancyZoom 1.1.zip (53 KB)

2 Using Transmit (or your favorite FTP client), upload the two folders inside the package to the root of your webserver.

3Add the following two lines of code to the <head> section at the top of your web page(s):

<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>

4Add onload="setupZoom()" inside your page's existing <body> tag. For example:

<body id="whatever" [...] onload="setupZoom()">

5Whoah. You're done! The rest is automatic — links to images in your page will automatically zoom the images. For example:

<a href="image.jpg"><img src="image-thumbnail.jpg" /></a> will zoom up image.jpg when clicked.

Additional Details

There are a few extra notes that you might find useful.
Want to add a caption? Add a title tag in your href. That's it!

FancyZoom will use the size of the first element in the href to determine the initial size and location of the zoom.

FancyZoom works best if you wrap your href around a thumbnail, but also works from text-only links to images.

FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.

If you're a Javascript hacker, FancyZoom's flexible fadeIn and fadeOut functions can be used for all sorts of fun stuff.

If you explicitly don't want an image to zoom, add a rel="nozoom" tag to your href.

Example

It's both an example, and some random pictures from Macworld Expo 2008!

this is it...

this is a text-only link...

this is it...