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.1 Download the FancyZoom package, right here:
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>
<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!
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.PS: Yes, you can even hold shift when you click an image. The Apple tradition continues!