cabel.name drafts: FancyZoom 1.1

FancyZoom 1.1

Friday, February 08, 2008

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:

FancyZoom 1.1.zip (53 KB)

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.

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
Now returns 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!

56 Comments:

Nice! It would bee cool if you could "move" through the images with the keyboard left and right arrows. Just like highslide does :)

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?

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:
http://tff4.com/work.php

Thomas 2/19/2008 9:43 PM

Not working in firefox 2.0.0.12 on MAC

philip 2/22/2008 6:10 PM

My Firefox is 2.0.0.11 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 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 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.

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.

pluckyou2 3/02/2008 6:35 PM

That's so great! Thank you so much.

Sophist 3/07/2008 11:13 AM

Trackback from Best resources for Web developers and designers

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

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?

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.

Thomas 3/27/2008 9:33 AM

ya, it's not working on firefox for mac

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?

XpLoiT 3/31/2008 5:13 AM

nice example photos, that kid's mullet is legendary!

Anonymous 4/03/2008 9:09 PM

Thanks Cabel, I used your script on the Utah Science Center 2008 Science Project photos page... http://utahsciencecenter.org/sciencefair/index.php

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?

Thanks!

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?

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 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 5/01/2008 7:28 PM

Muito bom exelente!
Very good!

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.

Thanks

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.
thanks
Lee

Leebo 5/24/2008 11:47 AM

It doesn't seem to work with IE 7.0

Any ideas?

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 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 6/27/2008 11:34 PM

A cool clean zoom effect. Very neat.

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!

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.

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.

LambWatch Competition 7/10/2008 5:14 AM

Very nice. I'm thrilled by the simplicity and power. Thanks!

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?

Clyne 7/29/2008 1:30 PM

Cool!!!!!!!!!!!!!!!!!!!
How to installing FancyZoom in ".PHP"?
ThankS!!!!!!!!!!!!!!!!!!

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

code:
...
...
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">

/style>
/head>

body onLoad="setupZoom();">

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

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

Thanks for an response, Maris

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">

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 (http://www.mediageci.tk) 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.)

Médiageci 8/31/2008 3:44 AM

Hello,

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.

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.

Thanks!

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

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.

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! ;-)

Tnx,
Marco.

Marco B. 9/28/2008 11:36 AM

Excellent! But how do you add this lens picture to youre thumbnails?

Regards

Anonymous 9/30/2008 6:42 AM

This plugin is cool! I'm using it on my next website.

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.

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?

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!

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

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.

Thanks.

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?

www.endlessvows.org/packages.html

and we wanted to use just links or text for the images.......thanks

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

boosh 2/28/2009 12:16 AM

Here is how I found to apply it to thumbnails.

http://wordpress.org/support/topic/157370

WT 2/28/2009 10:09 AM

Thanks!

maximus 3/17/2009 9:26 AM

Hello,

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?

thanks,

Chris

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.

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?

Chris

Chris 4/06/2009 6:15 AM