FancyZoom 1.1 Update: Version 1.1 released 2/8/08. Good bug fixes + Opera compatibility!



...so I fought back the charging Guanaco, immediately hopped on my paraglider, and basically caught the first flight out of Chile — but not without dealing with some cantankerous customs inspectors while drinking a cool glass of chicha. Really sorry it took so long! But hey, two years later, it's finally done!

Smooth Javascript Image Zooming For Your Web Pages This much-requested chunk of Javascript to zoom images inline, originally written for this blog but later rolled out to the Panic website and used for screenshots, is now polished up, bug-fixed, available for you to use on your website!



Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom's raison d’être (French for "raisin-determination") is providing a smooth, clean, truly Mac-like effect, almost like it's a function of Safari itself. Since I originally wrote this script, there are now a lot of image zoomers to choose from (including a similar effect now on Apple's own site!), such as the popular (and inspiring) Lightbox. So you might be asking: "Cabel, why use FancyZoom?" Well, here's why!

Focused on the smoothest, most polished zooming animation possible

Automatically scales images from any image link, with no HTML changes

Preloads full-size images in the background on link mouseover

No resource-heavy Javascript libraries — 100% coded from scratch to zoom

Draws a nice drop shadow under the full-size image to offset it from the page

Uses Safari 3's "box-shadow" feature to draw the drop shadow natively, no images required

Requires only two new lines of code in your HTML

Tested and works with Safari, Firefox, IE7, and IE6. (Looks better in modern browsers.) ...so I fought back the charging Guanaco, immediately hopped on my paraglider, and basically caught the first flight out of Chile — but not without dealing with some cantankerous customs inspectors while drinking a cool glass of. Really sorry it took so long! But hey, two years later, it's finally done!, originally written for this blog but later rolled out to the Panic website and used for screenshots, is now polished up, bug-fixed,Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom's raison d’être (French for "raisin-determination") is providing a smooth, clean, truly Mac-like effect, almost like it's a function of Safari itself. Since I originally wrote this script, there are now a lot of image zoomers to choose from (including a similar effect now on Apple's own site!), such as the popular (and inspiring) Lightbox. So you might be asking: "Cabel, why use FancyZoom?" Well, 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 Using Transmit (or your favorite FTP client), upload the two folders inside the package to the root of your webserver.

3 Add 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>

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

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

5 Whoah. 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!



Release Notes Version 1.1 released 2/8/2008. Improved Opera compatibility

Fixed an issue that would cause crazy infinite zooming

Now returns alt-clicks and command-clicks back to the browser, for standard behavior (open in new tab, etc.) License FancyZoom is totally free for your non-commercial website.



In a bit of an experiment: if your website is commercial (i.e. makes you money), you can license FancyZoom for $39 per site, a one-time fee. Instantly add nice image zooming to your site.

Enjoy I hope you and your websites enjoy FancyZoom. If you make any cool changes or improvements, let me know! And if you have awesome feedback, or find weird bugs, drop word in the comments.



Installing FancyZoom on your web pages should be dead simple.There are a few extra notes that you might find useful.It's both an example, and some random pictures from Macworld Expo 2008!released 2/8/2008.FancyZoom isIn a bit of an experiment:(i.e. makes you money), you canper site, a one-time fee. Instantly add nice image zooming to your site. Click here to instantly and securely buy a license. I hope you and your websites enjoy FancyZoom.And if you have awesome feedback, or find weird bugs, drop word in the comments. ©2006 Cabel Sasser