If you've ever been to Panic.com, home of OS X software like Transmit, you've probably noticed the very slick Javascript image zooming used in various places. It's quite possibly one the best image viewers on the web, just click a thumbnail and the larger image smoothly zooms up and loads in a light-box that mimics the look and feel of OS X 10.5's Quick Look feature.
Getting such a feature on your own site would require some serious JavaScript-fu (the only other place we've seen it is on Apple's new Macbook Air page, though Apple's animation isn't as smooth), but Cabel Sasser, one the people behind Panic.com has released the source code, which means now you can have the same image viewer on your own site.
FancyZoom as the library is called is very simple to use. Just load the library on your server, at a few tags to your page and that's it. FancyZoomer will automatically detect and attach iself to any jpg, gif, png, bmp, or tiff image links on your page. If you'd like your images to have a caption, just add a title tag to your link. Sasser says FancyZoom works best if you wrap your href around a thumbnail, but it will also work from text-only links to images.
The library has two downsides. The first is that it uses some transparent .pngs which means IE 6 will choke and judging by the comments on Sasser's blog post Opera doesn't seem to play well with FancyZoom either. Depending on your site's audience that may or may not be a concern to you.
The other draw back is that FancyZoom isn't free. Well, it is free but only for use on non-commercial websites, which are defined as sites that don't make money.
If your site, personal or otherwise, happens to serve ads, it makes money (or potentially could anyway) and you'll have to pony up $40 to use FancyZoom. And frankly, that's a bit steep for some JavaScript (Panic's Transmit, a full-fledged FTP program for OS X, is actually $10 less than FancyZoom).
Still, for some, you just can't put a price on website bling. So if you're looking to have the latest and greatest in JavaScript image trickery, FancyZoom just might be what you're looking for.
[via Daring Fireball. And for the curious, the truly awesome mullet in the shot above belongs someone Sasser photographed at Macworld]
See Also:
