FancyZoom 1.1

Update: Version 1.1 released 2/8/08. Good bug fixes + Opera compatibility! 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!


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>

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.


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


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.


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!


Nice! It would bee cool if you could "move" through the images with the keyboard left and right arrows. Just like highslide does :)
Anonymous Anonymous 2/09/2008 5:27 AM  
If all the images aren't the same size, it seems to just use the ratio of the first one clicked for all the subsequent images. Am I missing something or is this a bug?
Blogger SalsaShark 2/09/2008 2:45 PM  
Thanks, Cabel — I've been pining away for FancyZoom before I even knew it had a name. I wouldn't mind a gallery option, but I'm not going to complain.

Worked like a charm:
Blogger Thomas 2/19/2008 9:43 PM  
Not working in firefox on MAC
Blogger philip 2/22/2008 6:10 PM  
My Firefox is and doesn't see any updates when checked. At any rate, it works in 11, except that all of the thumbnails have ugly link boxes around them that aren't there in Safari.
Anonymous Anonymous 2/23/2008 4:15 PM  
I forgot to mention that I absolutely love the script and it's going to revolutionize our site. Thanks!
Anonymous Anonymous 2/23/2008 4:21 PM  
How do I style the caption? They are coming out with white text? Also, I don't see any preloading animation nor any dropshadows.

I am on the latest FF Win.
Blogger emd 2/26/2008 2:45 PM  
Good stuff!!! This will be making my craptastic site into a fantastic site!!! Thanks for sharing your hard work, will check back often to see what else you have cooking.
Anonymous pluckyou2 3/02/2008 6:35 PM  
That's so great! Thank you so much.
Blogger Sophist 3/07/2008 11:13 AM  
Blogger ccchai 3/09/2008 12:15 AM  
Great script, really nice. I like to suggest that you wrap it into a object so it will wont have to create and use the global variables and methods. So instead for setupZoom() you could use something like FancyZoom.setup()
Blogger Martin Ström 3/10/2008 8:51 AM  
I love this script. Wondering, if I am already using lightbox, will both the zoom and the lightbox appear if I load this in to my pages, or do I have to completely remove the rel=lightbox from the link?
Anonymous banler 3/27/2008 9:13 AM  
@banler: I had to remove my lightbox code — I would recommend you do the same. Also, Lightbox JS utilizes the Prototype Framework and Scriptaculous Effects Library, which you may no longer need if you have them for just the lightbox effect, and you should probably unlink those from your files as well.
Blogger Thomas 3/27/2008 9:33 AM  
ya, it's not working on firefox for mac
Anonymous Anonymous 3/29/2008 4:45 AM  
not working with leo 10.5.2 with firefox.

on 1st time load of the page with new images, clicking the image brings up a small white box with the close X on the top right hand side.

You need to close this and then open it again to get the image to display, u need to do this for all images the 1st time u load them on all computers running firefox. tested in safari and worked 1st time. seems to just be FF related. any idea on a fix?
Anonymous XpLoiT 3/31/2008 5:13 AM  
nice example photos, that kid's mullet is legendary!
Anonymous Anonymous 4/03/2008 9:09 PM  
Thanks Cabel, I used your script on the Utah Science Center 2008 Science Project photos page...
Blogger Michael Davie 4/10/2008 1:36 PM  
I'm very interested in using Coda, but I'm using a PC. Will it ever work for me on a PC?

Blogger mcaskey 4/14/2008 11:07 AM  
Great script!

Now can you put a form in the popup?

If not, will this be a feature in the future?
Blogger Nik 4/14/2008 7:26 PM  
I'm having issues centering the images. When I click on the images they go off the page and to the right rather than having them centered. Any ideas of how to repair this issue?
Anonymous Anonymous 4/17/2008 7:48 PM  
a light colour boarder and dark overlay would make any image looks more outstanding, that's what i think. anyway, still a fantastic work, would like to see more improved versions.
Anonymous Anonymous 5/01/2008 7:28 PM  
Muito bom exelente!
Very good!
Anonymous João F. Melo 5/08/2008 9:24 PM  
Hey, Love the script.

I would like to have this script function like the 'quick look' feature in Leopard. Is there a way to load different content into the window, and have it play a movie?

I absolutely love what you have accomplished thus far.

Blogger Derrick B 5/22/2008 10:09 AM  
Does anyone know if this can be implemented to open an iframe? Or of anything similar.
Ive seen a few lightbox and iframe mixes but none with the zoom feature of this wonderful script.
Blogger Leebo 5/24/2008 11:47 AM  
It doesn't seem to work with IE 7.0

Any ideas?
Anonymous Anonymous 5/28/2008 7:45 AM  
I'm also having issues with it not working in IE7. Works fine in the latest Firefox though.
Anonymous Anonymous 6/13/2008 6:13 AM  
Is it possible to use this in a Iframe, but let the picture zoom outside properties of the frame itself ? So that it zooms outside the frame to show as a big image not a small one that's the maximum format of the iframe ?
Anonymous Anonymous 6/27/2008 11:34 PM  
A cool clean zoom effect. Very neat.
Anonymous sgambella 6/28/2008 1:01 AM  
Love the code!!!

Firefox3 - works fast and easy :)
IE7 - works but the zoom is verrrryyy slow. IE7 on your page is fine and fast. Same code and parameters, same file sizes... what could be different?

Please help and thanks!
Blogger djboca 7/02/2008 10:28 AM  
Thanks for finally releasing the script for this. No more reconfiguring lightbox to look like this so yay!

PS. Jollibee rocks! To those you don't know, they're a popular(at least in the Philippines) Filipino fast food franchise and I think everyone needs to try them out at least once.
Blogger Jeff 7/05/2008 10:45 AM  
Excellent - just what I was looking for - the simplicity is great and works with a whole load of other ajaxy stuff... used it for my competition entries at LambWatch.
Anonymous LambWatch Competition 7/10/2008 5:14 AM  
Very nice. I'm thrilled by the simplicity and power. Thanks!
Anonymous Joel Smith 7/15/2008 9:50 AM  
Excellent script! One thing tho, when I view from Firefox/Safari on my MAC all the pictures are condensed to the same size. I.e. Portrait is condensed to landscape and vice versa. Anyone have any tips how to sort this?
Anonymous Clyne 7/29/2008 1:30 PM  
How to installing FancyZoom in ".PHP"?
Anonymous Ku 7/31/2008 6:05 AM  
Hello there,
I have a problem to get it work.
I made a little exemple of a site just to see how it works on my computer - to later integrate this feature in my website. But it doesn't work. I'm seeking for hours the solution.

Could you be able to look to the code and tell me where is a problem. The image opens like a normal "href" i dont know why...

script src="/js-global/FancyZoom.js" type="text/javascript">
script src="/js-global/FancyZoomHTML.js" type="text/javascript">
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
title>Untitled Document /title>
style type="text/css">


body onLoad="setupZoom();">

img src="image1.jpg" width="181" height="135" border="0" />

All files are in one folder on my computer, i thought perhaps it works only on the server...

Thanks for an response, Maris
Anonymous Anonymous 8/11/2008 6:19 PM  
I think if you try without the Slash at the start of the url it will be done.

script src="js-global/FancyZoom.js" type="text/javascript">

script src="js-global/FancyZoomHTML.js" type="text/javascript">
Anonymous kurtz 8/16/2008 7:00 AM  
Great script, the best Lightbox clone (or Lightbox was cloned or modified from this one?), easy to use and really clever, thanks Cabel.

Works fine on my blog ( with my main browsers under Windows XP. I only have problems with the loading animation routine under the latest browsers. It only works under Opera (9.50 B10063), and shows the static first frame under SeaMonkey (1.1.11), Firefox (3.0.1) and Internet Explorer (7.0.5730.13).

And I have an additional feature idea, if you plan to improve it in the future. You could zoom the thumbnail until one point (would be uglier, more pixelated) while you crossfade it to the target. It would be interesting on some sites like my blog. (I imitate a monochrome paper with my thumbnails, and sometimes crop pieces from the full picture.)
Anonymous Médiageci 8/31/2008 3:44 AM  

Just stopped by to thank you for this wonderful image previewer. Thanks a million!

Just one question if I may...

How can I make this thing work locally, so I can test it whenever I do some changes in my HTML file, without uploading it to my server every single time ?

Sorry for my ignorance and thanks for your answer in advance.
Anonymous Sasha 9/01/2008 7:15 AM  
I forgot to say, I tried this advice by Anonymous:

"...I think if you try without the Slash at the start of the url it will be done.

script src="js-global/FancyZoom.js" type="text/javascript">

script src="js-global/FancyZoomHTML.js" type="text/javascript">

It works, except it's not showing png images for close button and caption background. I guess path for those is defined somewhere inside those .js files but I am not sure how to fix this...

Any help would be greatly appreciated.

Anonymous Sasha 9/01/2008 7:54 AM  
FINALLY! I got it working.

Yes, it was inside the FancyZoom.js file. This is the line that needs to be edited:

var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images

Just remove the very first slash before "images". Your line should look like this:

var zoomImagesURI = 'images-global/zoom/'; // Location of the zoom and shadow images
Anonymous Sasha 9/01/2008 9:36 AM  
I'm creating a project in which I would like to have the image when zoomed in slightly off center, vertically in Y axis. what do I need to change or add to have that work? Thanks for the help.
Blogger Micahgf 9/05/2008 11:58 AM  
This is the best image zoom i've found. Thank you!

I just have a little request:

why don't you put the possibility to switch between more than one image with some arrows?

It would be the perfection made zoom! ;-)

Blogger Marco B. 9/28/2008 11:36 AM  
Excellent! But how do you add this lens picture to youre thumbnails?

Anonymous Anonymous 9/30/2008 6:42 AM  
This plugin is cool! I'm using it on my next website.
Anonymous Antonio Wells 10/07/2008 6:15 PM  
didn't really read the above comments, but if you mouse to an image really fast and click on it, the popup is empty. now loading, just a blank little square. on mac, firefox, latest.
Anonymous arlo 10/13/2008 10:41 PM  
I'm using both portrait and landscape photos, but the zoom image locks onto the aspect ratio of the first image clicked. Is there any way to reset it for every new time it's loaded?
Anonymous Adam 10/14/2008 1:22 PM  
Here is my real question:

I'd made my website slideshow (media link) with ajax. It works perfectly until i refres my images on the slideshow (dinamicaly with ajax, not reloading the page...). The problem is that the new images aren't detected for the fancybox and the effect doesn't work...

Can someone help me?

Thank you!
Blogger Eric Miralpeix 11/14/2008 3:06 AM  
Hi there... great script.

I was wondering if there is a possibility to had a overlay when the picture zooms in? I know others do it, but I had some troubles making my site working woth the others scripts, and this one works perfectly, the only thing I´m missing it´s the overlay.

Can someone post how I can acheive this... if possible.

Thanks, Luis Monteiro
Blogger Kenjinsan 1/26/2009 12:38 PM  
Hi there - I love Fancyzoom. It's really easy to use and adds a lovely effect.

Just wondering if it's possible to place the pop up window somewhere other than center? In some instances it would be nice to have the pop up zoom left of the thumbnail rather than in the middle of the page.

Blogger Jana 1/29/2009 12:40 PM  
would someone be so kind as to look at this page code and tell me where we are incorrectly placing the code?

and we wanted to use just links or text for the images.......thanks
Anonymous Anonymous 2/05/2009 8:31 AM  
Thanks Sasha! That was my problem too... the images (close button, shadow) not displaying... the root file path is really a bad thing to have... / are bad ;)
Anonymous boosh 2/28/2009 12:16 AM  
Here is how I found to apply it to thumbnails.
Blogger WT 2/28/2009 10:09 AM  
Anonymous maximus 3/17/2009 9:26 AM  

Great bit of coding and im hoping to use it on my page.

I have one problem, trying to integrate the effect into an iweb page..

I have the actual zoom effect working perfectly but as soon as I link it into the page it removes every shadow and stroke-border from the page it is on!

I know they are still there, because if i unlink the zoomer by removing the bit of code in the head section of the page, everything comes back..

Any idea whats going on here?


Blogger Chris 3/31/2009 5:56 AM  
To avoid having issues in IE (specifically a "Not Implemented" error), you shouldn't call onload="setupZoom()" but onload="setupZoom" without the parenthesis.
Blogger barbutti 4/03/2009 1:20 PM  
Hi again,

Further to my other comment it seems to be something to do with no longer using the pages CSS sheet but instead the zooms one!

Anyone know how the two can coexist in the same page?

Blogger Chris 4/06/2009 6:15 AM  

Post a Comment


Name:Cabel Maxfield Sasser
Job:Co-Founder, Panic Inc.
Location:Portland, OR