Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Bring Some Bling to Your Web Galleries With FancyZoom

fancyzoom.jpg

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:

Post Comment Comments Permalink Print
Reddit Digg

 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year