It may be patently obvious, as the relevant post is directly below this one, but until FancyZoom moves to its own home on the web, sometime in 2018, this is probably the best way to get the word out to you RSS reading folk: FancyZoom update! Actually, it shows how little I use the RSS — do people get notified when I make revisions to existing web log posts? Or do most people turn that feature off? Do I sound like the world's oldest man? MY PICTURE BOX IS BROKEN, WHY CAN'T I GET MY MOVIE FILMS ON MY PICTURE BOX?

Anyway, FancyZoom is already at version 1.1. I made it work with Opera (and, theoretically, the Wii!), fixed some crazy bugs, and improved the keyboard behavior. Release notes in the original post.

I hope you enjoy these updates!

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.)

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.

FancyZoom 1.1.zip (53 KB)

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
• Improves caption behavior in certain situations
• Now returns any 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. Click here to instantly and securely buy a license.

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.