Cabel.Cabel.

FancyZoom 1.1

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>

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!

651 Comments:

Read more comments
Sweet Jesus, that's great.

I'd prefer a white border around the image to offset it further, but that's not a major thing.
Blogger Neven Mrgan 2/07/2008 1:42 PM  
In IE6 the .png's that are used for the background aren't transparent, but that's pretty minor and unfortunately needs a hack.
I'm sure the faithful readers of this blog are using something a little more modern then that though.
Blogger bretto 2/07/2008 1:45 PM  
Very nifty!
Blogger Sean Harding 2/07/2008 1:46 PM  
It's worth mentioning that it works well on MobileSafari as well.
Anonymous Jason 2/07/2008 1:46 PM  
I think I might like a border as well...but still, very nice.

And I saw that same kid with the mullet at MacWorld (photo #8). Did anyone stop him to ask him what the hell he was thinking? (Unless it was a joke, in which case, I salute him.)
Anonymous GregM 2/07/2008 1:48 PM  
Sean: I should have mentioned that older browser can get a less-than-ultimate experience. :) Additionally, only Safari (so far) will take advantage of the built in box-shadow feature. I hope more browsers add that in the future!
Blogger Cabel 2/07/2008 1:49 PM  
Congrats on the release! Looks good. The big news for me though is that the Cartoon Art Museum has Mary Blair art. Will have to check it out next WWDC.
Blogger Manton 2/07/2008 1:56 PM  
Thanks, Cabel. You da MAN.
Anonymous tangoravi 2/07/2008 2:02 PM  
Wow, Cabel, that's really beautiful. I love it.
Anonymous Alex 2/07/2008 2:14 PM  
Cool as always. Thx, Cabel!
OpenID planetexpress69 2/07/2008 2:21 PM  
yikes. slooooooooooow.
Anonymous sirtimbly 2/07/2008 2:22 PM  
oh neat. it looks horrible in IE6 so don't expect anyone to use it.
Anonymous Anonymous 2/07/2008 2:23 PM  
Yeah, yeah.. typical Cabel genius. *yawn* ;-P

More importantly... do you actually paraglide? I highly recommend it and you're in something of a mecca for it with many, many sites on the coast, in the gorge and up Tuttle valley-way. I highly recommend it. :-)
Anonymous Parker 2/07/2008 2:23 PM  
Cabel, how would you define "commercial"? Would you consider a site with a few ads to be "commercial"?

Some people say yes, some say no, so I'd love to know your opinion. :)
Anonymous Anonymous 2/07/2008 2:25 PM  
Oh thank you! I've been waiting for this for a long time!
Anonymous Anonymous 2/07/2008 2:38 PM  
Actually Firefox 3b2 (the browser I'm using) also shows the shadows correctly. Yay!
Blogger Martti 2/07/2008 2:49 PM  
Please don't go paragliding.

Your Father
Anonymous Anonymous 2/07/2008 2:51 PM  
That's great. Thanks for sharing!
Anonymous ssp 2/07/2008 2:54 PM  
This ROCKS Cabel! Not only is it great looking, but the implementation on a website could not get any easier!

THANK YOU!!!
Blogger Kevin Hoctor 2/07/2008 3:00 PM  
Thanks so much Cabel. When I first stumbled onto your blog I was fascinated by the fancy zoom. Now I've incorporated into our family blog, easy as pie!

http://avaelliot.com
Blogger Ava's Dad 2/07/2008 3:01 PM  
Thank you, thank you, thank you!! I spent hours last night trying to get Adobe Spry to do something half as good as this!

I'm happy to pay for such a great feature and to make my site look better! I do hope others support you as well.
Anonymous Anonymous 2/07/2008 3:30 PM  
This is great Cabel, but just a thought... how about building a license to use this in the next update to Coda?!
Anonymous Anonymous 2/07/2008 3:33 PM  
Awesome! Will be sure porting this to my blog.
OpenID NeverPanic 2/07/2008 3:33 PM  
Fancyzoom is great. Does anybody know whether it would be possible to add a slight darkened background like a traditional javascipt lightbox behind the popup ? i think that would make this perfect. thanks
Anonymous Anonymous 2/07/2008 3:50 PM  
I'm in love man... Good work. Like much better than lightbox.
Blogger Josh McKenney 2/07/2008 4:15 PM  
nice. Even works on the iPhone, although slow.
Blogger Corey 2/07/2008 4:17 PM  
too bad it does not work properly with Opera.
Anonymous Anonymous 2/07/2008 4:34 PM  
Cha-am express was also owned by the Jollibee corporation.
Anonymous Anonymous 2/07/2008 4:40 PM  
An addition that might be interesting for either Cable or someone else to consider:

Detect the browser, and if it's an iPhone/iPod touch, provide a customized version which:

1. Works faster (by dropping frames)
2. gives a bigger loading spinner
3. scales and places the image so it takes up with width/height of the iPhone screen
4. provides a bigger Close button
Blogger Neven Mrgan 2/07/2008 4:50 PM  
Hey Neven: You bring up a great question.

I was once thinking that, actually, inline image zooming doesn't make much sense on the iPhone -- that a full page load to the image, traditional-style, is much better, because it provides easier panning/zooming of the image to see it up close, and you have an easy back button to get back to where you were. My original plan was to detect the iPhone and turn off the zooming entirely.

If you think about it, "filling the screen", which makes a lot of sense, is a challenge on the iPhone, because of the scale factor. If your image is small, and you are zoomed out so that you see the whole page, filling the screen with your image would mean stretching the image far beyond its original dimensions, which could look terrible.

It's super tricky.. still thinking. ;)
Blogger Cabel 2/07/2008 4:54 PM  
Seems to work on Opera 9.5 beta (Mac) except for the fact the image is placed way down on the page so you have to scroll down to see it.
Anonymous Anonymous 2/07/2008 5:00 PM  
I too would like to know exactly how you define commercial. I run a few personal sites/blogs on which I show ads—do those count? I I might also try to sell personal music in a few months on one of them, so I assume that one almost surely will.

Any chance you could elaborate?
OpenID David Chartier 2/07/2008 5:04 PM  
David: Good question. Let's think about it out loud! :)

What about "commercial" meaning "if your site makes you money?". In that situation, $39 should be pretty reasonable, and could, in an oblique way, help your site make more money through a better user experience?

Thoughts?
Blogger Cabel 2/07/2008 5:12 PM  
My big gripe with this (and all the other image-zoom hacks) is that if you cmd-click a link, it doesn't open the image in a separate tab (though strangely, middle-click does still work). Generally I hate Javascripty things that try to redefine the browser's semantics anyway, though.
Blogger fluffy 2/07/2008 5:19 PM  
Fluffy: You know, I think I might be able to adjust it so cmd-click still works! I'll take that as a feature request for 1.1. ;)
Blogger Cabel 2/07/2008 5:21 PM  
Awesome! I was floored the first time I saw this on your site. I'll probably end up rolling my own with more of a border to separate the image from the content, but it's neat to see the code.

A few things I've noticed:
The loading spinner either doesn't animate, or animates very sporadically (it'll move a position or two, then stop for a second or so, then repeat).
Sometimes, when an image hasn't completely loaded before zooming starts, it will zoom using the previously loaded image, and then switch them once zooming completes, which can be a little jarring. (I'm on Camino 1.5, which uses Firefox's Gecko engine).

Other than that, this is a great image displayer. I like it a lot more than light box.
Anonymous DLP 2/07/2008 5:27 PM  
That mullet picture is truly epic. I'd love a caption so I could hear Cabel's thoughts on it.
Anonymous Anonymous 2/07/2008 5:35 PM  
I'm completely blown away. Thank you. Again and again.
Blogger mistersquid 2/07/2008 5:51 PM  
"That mullet picture is truly epic. I'd love a caption so I could hear Cabel's thoughts on it."

Actually, I think it's wholly appropriate that it is noted without comment.
Anonymous Stephen Coles 2/07/2008 5:56 PM  
That's an awesome piece of code there. Thanks for sharing your talents with us!

Oh and... the image with the slogan "Bone your Life"? WTF?! (in terms of the somewhat distasteful euphemism that is "bone", at least here in the land of Oz)
Blogger Xander 2/07/2008 6:02 PM  
Opera... lololololo
Anonymous uniuni 2/07/2008 6:20 PM  
Cabel, I've been waiting for this! I even considered appropriating it from your blog for the blog I'm coding contrary to your *express instructions*. I'm glad I waited.

You're a champ. Thanks.
Blogger Nick Valvo 2/07/2008 6:24 PM  
This is lovely. I've always liked your screenshot "zooms" -- thanks for sharing.
Anonymous Ben D. 2/07/2008 6:46 PM  
Very nice! I only recently started using Lightbox, but FancyZoom is a cleaner, more elegant solution.
Anonymous Jon 2/07/2008 7:01 PM  
Oh boy, remember the countless emails from me? Garrett? Yah, you remember. You are totally getting the $39.00 without me using it on a commercial site.

Thanks so much!
Blogger Garrett 2/07/2008 7:13 PM  
Cabel: Your definition is simple, straightforward, and agreeable. Thanks!
OpenID David Chartier 2/07/2008 8:11 PM  
Totally love the slow-motion shift-click. Just like OS X!
Anonymous Anonymous 2/07/2008 10:01 PM  
Our site has AdSense, which brings in income. On our site is a blog. We hire freelance writers to write the blog. We pay them more than we make from the AdSense income attributable to the blog. (We do this deliberately in an attempt to develop the blog into a profit center in the future.)

Is our blog commercial? :-)

It's not that I'm so cheap, but rather that I'm skeptical that we would end up using this after the gimmick factor wears off. Most software has a trial period, so you can diddle with it and if you stop using it before the period is over, you don't pay for it. For instance, we licensed Transmit (useful) and didn't license Coda (nice solution for some people perhaps, but we were satisfied with our old workflow).

Perhaps a built-in one month expiration, not something that couldn't be gotten around so much as something so people who install it and decide they don't need it don't have to manually go back into their blog posts and rip it back out again.
Anonymous Anonymous 2/07/2008 10:11 PM  
Incredible work, thank you.

Might it be possible to incorporate the way in which Lightbox handles sets, with Back and Forward arrows which appear on the enlarged photos when you hover over the left or right sides?

Some users like to pick and chose which thumbs they want to enlarge but others like to zip through sets using those arrows - they save a lot of mousing back and forth.

I think it would be a genuinely useful feature but would it add too much cruft to the code?
Blogger donnacha 2/07/2008 10:40 PM  
Anonymous: Yes, I'd say your blog is commercial — regardless of profitability. ;)

Sadly, there's no reasonable way to put a "trial period" on a piece Javascript, nor would I really want to. You can see it here, in action, and review the code yourself. Most importantly, assuming your blog runs on templates, and it should, "ripping out" FancyZoom simply means removing two lines of code from your template and re-publishing. Extremely easy.

Ultimately, if you're at all hesitant about using it in the long term etc., this effect is probably not be a great fit for your site — either you love it or you don't! :) That said, we've used it for years on the Panic site, and here on my blog, for many years, and I think it's a great way to view images.
Blogger Cabel 2/07/2008 10:42 PM  
donnacha: It's absolutely something I want to add in the future. At this rate, version 2.0 might land in 2016, but I've got some ideas and I'll keep it on my to-do list!
Blogger Cabel 2/07/2008 10:44 PM  
Wow, speedy response, thanks Caleb :)

I have a couple of thoughts on the pricing issue:

Licensing a piece of Javascript is tricky, especially on a per-site basis. As you are selling something that makes a site look better, more special, I would draw an analogy with the sale of website templates and blog themes. Part of what you pay for is that the price itself acts as a barrier against saturation, keeping the look somewhat exclusive.

In this case, however, the vast majority of sites on the Web, being non-commercial, can use FZ for free. The guys who do pay are left with something that, yes, does its job but is no longer "special", because every Tom, Dick and Harry is using it for free.

In short, paying for something visual should entail some exclusivity - people's eyeballs don't care if a site is commercial or not.

Also, charging on a per-site basis is messy. A good piece of Javascript should become part of a Web designers toolbox - he shouldn't have to stop creating in order to figure out what the licensing issues are. Sure, a big app like a forum justifies that but not a piece of Javascript, no matter how beautifully crafted!

It would also be a nightmare for you to police, or to handle support issues like customers wanting to transfer their license from a defunct website to a new one - happens all the time. It would make much more sense to sell it as a developer's license, unlimited uses by one developer, non-transferable.

I guess you could sell a single-use version for people who definitely only want it for one, but the vast majority of use just want something we can splash onto the canvas whenever we want.

Even better, forget the commercial/non-commercial distinction and, as someone suggested earlier, include it with Coda instead of whatever discount you're running at the moment. I'm one of the people who used Coda heavily for the demo period, liked it but didn't see enough advantages (yet) over Textmate + CSSedit to justify spending a hundred bucks. This feature, however, would make it worthwhile - I would buy it tonight and become a Coda evangelist if I got to put FZ into my toolbox.
Blogger donnacha 2/07/2008 11:36 PM  
Pretty good work! Love the effect.
Blogger LEGIT freebies dude! 2/08/2008 12:02 AM  
donnacha: The commercial use license is a total experiment with no expectations. I'll play it by ear and adjust as necessary. As an aside, I don't feel the effect's value is being "special" or "exclusive" — the value is that it can make websites work better, and I want everyone to use it as widely as possible. Best case scenario: the user thinks the browser is zooming the image, not the web page!

The only idea behind "commercial licensing" is to help recoup and fund future development of this script by getting something back from the people who make money off of their websites (and for whom I'm theoretically saving a lot of time) without affecting all of the people who don't.

(Fortunately, there are also tons of free alternatives for commercial websites on a less-than-$39 budget!)
Blogger Cabel 2/08/2008 12:08 AM  
Love it — I've wanted something like this ever since I saw the effect on apple.com - but I'm not really familiar enough with JS… Anyway - what do you consider as commercial? Is a blog with ads, eg: Adsense, shown on it commercial, or is it only sites that sell something, or websites for for-profit companies?
Blogger Paul Walker 2/08/2008 12:14 AM  
cabel: Yeah, I agree that good tech should be used as widely as possible, I wasn't defending the idea of exclusivity, just expressing my understanding of how developers justify buying some things but not others. At a certain point, it's not about the money, or whether there are free or cheaper alternatives, it's more about it being an obvious and simple purchase.

If you really do want to see it used as widely as possible, why not encourage the professional designers to adopt it into their arsenals by making the commercial license multi-use? It isn't about the cost, it's about ease-of-use and ease-of-purchase-decision for the designer. Charge whatever but don't load the purchase with this mental overhead of having to remember buy a license each and every time you cut n' paste parts of an old website into a new one. That's just a recipe for piracy, better to get a lump sum up front.

Again, thanks for releasing this - I don't have the talent to do what you do and my suggestions should be considered entirely as those of an armchair spectator.

By the way, having thought about it some more, it strikes me that one of the nicest things about Coda, for me, was clips and it would be interesting to see Coda start to include "Pro" clips, such as one that adds FZ. Any chance of that happening?

And, in the meantime, is there any chance you'll be offering a Coda + FZ(commercial) bundle?
Blogger donnacha 2/08/2008 12:41 AM  
FancyZoom is absolutely stunning! No doubt about that.

But I find 39 bucks a little over-prized. Just think about it:
- Mint is a complete website tracking solution with support for plugins for just 30 bucks. (haveamint.com)
- PHPlogin is a complete login and user management solution for just 29 bucks. (phplogin.net)
(those two just came to my mind as I have bought both of them, I'm not affiliated with them in any way.)

Both of these packages are licensed per-site. … Just like FancyZoom.
Both come with a huge set of features. … Unlike FancyZoom.
Both are well written and designed. … Just like FancyZoom.

Now about FancyZoom: What does it give you?
- The fanciest online image zoom component available. Right. … but … that's it?

I think you get my point, don't ya?

Vincent
Anonymous Vincent 2/08/2008 1:01 AM  
Hey Vincent!. Mint is totally awesome, and one of my favorite web applications of all time! A huge value! Anyway.

You're right — FancyZoom is fancy! It might be pricey for some commercial websites that are running lean. The good news is that there are tons of totally free image zooming scripts out there, such as the excellent Lightbox. I'd probably recommend one of those scripts for a website that doesn't have a spare $39 in their budget.
Blogger Cabel 2/08/2008 1:10 AM  
Donnacha: Licensing per domain is the easiest way to tackle this for me. If I visit microsoft.com and stuff be zoomin' all up in there, I can instantly see if microsoft.com bought a license. (Assuming anyone does.) But I have no idea what web authors worked on microsoft.com, or how to look up their in-house or freelance or agency team members to check, etc. I think most designers should be able to bill through $39 to their client that they're already billing anyway. Honestly, who knows? I sure don't! It doesn't even really matter that much. But thanks for the feedback!
Blogger Cabel 2/08/2008 1:15 AM  
Great script!!! But I was wondering, how do I make option-click downloads work?
OpenID maarten.vancoile@mac.com 2/08/2008 1:35 AM  
Caleb: I don't have any image-heavy website that would need something like FancyZoom. Not even the free ones ;) …
… the discrepancy just struck me when I saw the price tag. ;)

I find it totally correct to make this thing commercial. It's really worth it. But I'd rather have chosen something like:

- 5 bucks for non-commercial use.
- 25 bucks for non-commercial use.

If I really like an app or script I'm more than willing to pay the author a coffee. Even if my purpose was completely non-commercial.
But I think a product should be in a price range that makes sence when being compared to others.
Anonymous Vincent 2/08/2008 2:03 AM  
Ooops, of course I meant "Cabel" not "Caleb" :P
Anonymous Vincent 2/08/2008 2:05 AM  
cabel: Fair enough, I guess that makes sense from a policing perspective ... although I dearly hope that you won't be wasting your time chasing license infringers, time you could spend creating more cool stuff :)

I can see that you are now starting to get frustrated with people questioning the $39 and, of course, yes, $39 is not going to seem like much the owner of a successful software company - the griping must seem insulting, given that you've just made this tremendous gift to non-commercial users.

Try to understand, though, that most of us, especially outside America, are now working in a far more difficult environment than a few years ago. Many have to hammer out several sites per day for extremely low, set prices and simply don't have the option to casually bill our clients for extra bits and pieces - people aren't being cheap and it isn't that they are somehow bums because they don't have the "proper" corporate clients you're used to dealing with, they are real, working people and that $39, recurring, is coming out of their pockets.

They are just regular guys and gals trying to be ethical and pay a fair price for your good work rather than pirate it but, at the same time, struggling to understand why this one (admittedly extremely nice) feature is worth hundreds of dollars per week, every week, whereas a fantastic set of CMS themes that they'll use hundreds of times has a once-off cost of $200 for a developers license.

Imagine if Coda or Dreamweaver cost $39 per website - sure, the guys working on Microsoft.com and hundreds of other corporate, high-end designers would buy them, but the other 95% of designers would not.

As I said, your approach makes a lot of sense from a policing perspective, not so much from a sales perspective - you will sell tons and tons of licenses, but sadly the smaller designers, who work on a higher volume of lower value sites, are either left out or will feel somewhat justified in simply pirating your work. And, by the way, we "low-grade" designers are actually 95% of your potential market - what we lack in cachet we make up for in sheer bulk.

As you said, this is all experimental, I hope you will, at some point, consider a more inclusive approach.

And, please, don't get so frustrated/annoyed with those of us who have balked at this pricing scheme, it's all just feedback.
Blogger donnacha 2/08/2008 2:10 AM  
hey cable!
thanks for these fancy lines of code!
what about shortcuts?
"x", "c" or "w" for close, or the arrowkeys for forward etc.
Anonymous paul 2/08/2008 3:28 AM  
thanks... very nice!
Blogger البرباش 2/08/2008 3:57 AM  
This is copied from Apple's website

http://www.apple.com/macbookair/design.html
Blogger Anil Kumar 2/08/2008 4:52 AM  
Anil Kumar: Obviously you didn't read Cabel's post:

"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."
Anonymous Vincent 2/08/2008 5:24 AM  
It looks good.

It doesn't work in Opera though.
Blogger kirshaw 2/08/2008 5:52 AM  
Wow... That's one amazing image zoomer. I've written a similar one in the past, but it's just not as magical as FZ.

I also find the 39$ price point very fair. It's a premium product that you've definitely put a lot of effort into. Given its ease of use, those 39$ practically pay for themselves...

And I'm also amazed how the fact that there are free alternatives like lightbox actually justify a rather high price point -- if you don't want to pay for it, use something else...

The script's a bit buggy in IE 6, though (SP2, tested under Parallels):
1) the PNGs aren't transparent (as expected). By using a PNG behaviour file, this could easily be solved, though.
2) Sometimes the image flashes while closing
3) I don't know how I manged to do that, but once the image didn't zoom in when clicked, but moved to the center of the page, becoming smaller and smaller, until it disappeared. (maybe the image wasn't completetly loaded yet, and IE thought the dimensions where 0x0px?)
Anonymous Anonymous 2/08/2008 5:53 AM  
I'm seeing a white border at the top, looks like a single pixel, in Firefox 3b2 on Mac and Firefox 2 on Windows. Looks fine in Safari 3 (with shadow!)

btw thanks for a great little lib.
Anonymous col 2/08/2008 6:19 AM  
Chapeau! Best Javascript image component I've seen so far!

Great job!

Dominic Morin
www.zypto.com
Anonymous Anonymous 2/08/2008 6:29 AM  
your page and the tool are both broken in opera (the most compliant browser). sorry but your script is still beta imho. good luck with it. =]
Anonymous Anonymous 2/08/2008 7:08 AM  
I have a pretty weird problem when I tried to use it on my site . im using textpattern and i have another onload tag in the body, so i figured out that i should do it this way :

body onload="preloadImages(); setupZoom();"

the thing is as u can see on the test page on my site, when u click the images, they do the opposite of zoom! they go fly into a little square window at the top of the page. any ideas? it seemed like a cool feature to have
Blogger pketh 2/08/2008 7:15 AM  
Little bug I found: it seems that sometimes if you double click on an image after you've clicked on it once - while you get the loading spinner - it goes into a limbo (opening and closing an image continuously) that can't be stopped other than by reloading the page. Clicking on another image moves the problem to that. I guess this might be a bigger problem if the image was large or the server was taking time to load the image.

Otherwise: Brilliant! I'll be using this!

k
Anonymous kristian 2/08/2008 7:32 AM  
No disrespect intended, but I'll continue to use Lightbox. It dims the background, supports keyboard navigation, and does everything else that FZ does (except, I suppose, actually "zoom" the image). Its implementation also doesn't require adding yet another thing to the body's onload event.
Anonymous Anonymous 2/08/2008 7:36 AM  
I see that you and your cousin are both using Blogger, but I can't get it working in WordPress.

I have the script tags pointing directly to the php code (which I can pull it up in my browser), but it doesn't do anything to my pictures.

Any ideas? TIA.
Blogger BillyG 2/08/2008 8:22 AM  
BillyG: Did you include the onload handler? E-mail me your page and I can check it out.

Anonymous: Indeed, FancyZoom is all about the zoom! :)

kristian: If you can reproduce that with some steps, please let me know. I'd like to fix it too.

pketh: A good mystery. Can you e-mail me? I bet we can solve it with some code hacking.

Finally, RE: Opera, I'll definitely take a look at it at some point. Strange that the getSize() code to get the browser window dimensions works fine in every other browser, though!
Blogger Cabel 2/08/2008 9:10 AM  
Cool script but it is kinda worrying that Donnacha's point about the price, how you wouldn't pay $39 per site for dreamweaver, is being ignored. It might be a good deal for inhouse web developers working on just one site all the time or just a few big, well-funded projects but the rest of us can't afford to pay thousands per year. Also a bad sign that the developer ignores difficult questions. If you expect a cut on everything we do, surely it is wrong to ignore people.
Anonymous PixelGirl 2/08/2008 10:03 AM  
nice, maybe you can find a solution for a faster switch between the images...

--------------------
we love T-shirts
http://www.dexflu.eu
Anonymous Anonymous 2/08/2008 10:14 AM  
This is really great, thanks for sharing your work/time so generously. I have one question ... how hard would it be to apply the effect to an image with caption text? Impossible? Easy hack? I'd be very interested in knowing.

Thanks,
Tom T
Anonymous tomtwigg 2/08/2008 10:34 AM  
Really, you can only use onetime for $39?
365 x $39 = $14235, more than my pay!
Nice script, greedy man.
Anonymous ฟหกด 2/08/2008 10:45 AM  
ฟหกด - Haha — dude, I'm not that crazy.
"One-time fee" means you only have to pay once, not that you can only use it for one day.
$39 x 1 = only $39, per website.
Blogger Cabel 2/08/2008 10:54 AM  
Who designed the icon of FancyZoom (with the lense ?)
Anonymous Greg 2/08/2008 11:06 AM  
Pixelgirl: If I was ignoring, I wouldn't be posting! :) Feedback is always noted. I just think of FancyZoom as a "site add-on" that pluses a website in exchange for a small license fee. I can't imagine how FancyZoom could cost you thousands per year — unless you're not charging clients correctly, or your site doesn't make money, in which case you don't need to pay the license fee anyway! :) Ultimately, I feel if a client doesn't see value in paying $39 for goofy zooming images, it's really not big deal — there are tons of free and good alternatives you can point them towards!
Blogger Cabel 2/08/2008 11:06 AM  
ฟหกด: FZ isn't required to make a website work. I'd say if you can't charge the $39 to your web design client, seriously don't use it! Use one of the free ones instead. There's no earthly reason you should lose money on using a crazy image zooming script! :)
Blogger Cabel 2/08/2008 11:09 AM  
Screw the price haters, if they don't like it they don't have to buy it!

Great script! I'm installing it on my non-comm site now, would be pleased to pay for it in the future.
Anonymous JimmyJojo 2/08/2008 11:10 AM  
Greg: Fantastic question! That was the work of Kenichi Yoshida, icon genius and, actually, newest employee of Panic Japan! I gotta post about that someday...
Blogger Cabel 2/08/2008 11:11 AM  
Cabel: Wow that's awesome ! I was wondering what was doing Mr. Yoshida as he said on his blog that he was going to have some profesionnal changes. I'm glad to hear that he's now working full time with you.
Anonymous Greg 2/08/2008 11:15 AM  
Cabel, is there anyway to include some sort of navigation from picture to picture. I love how easy this is to use, and I'd love to use it in my galleries. I think it'd be best if you could mouseover the right side and get a "next" link and mouseover the left side and get a "previous" link.
Blogger Derek 2/08/2008 11:21 AM  
Cabel, I notice that you are deleting quite a few posts, understandably in some cases, but I think there were some valid points. I hope you will allow this comment to stand. I met you briefly at MWSF and you seemed like a reasonable guy.

Personally, I think the price thing is a none issue - you are not providing a developers license, so, for whatever reason, you are skipping the low-end of the market. Realistically, the small fish won't bother to license and, realistically, you're not going to bother chasing them down. You are obviously aiming to create a scenario in which anyone working on an important enough project for $39 to be no big deal will pay, that will be enough to make the project worthwhile and you won't waste time chasing anyone.

Of course, that does create a conundrum for the small fish who want to be honest, LOL, but they should stand back and read between the lines. Personally, though, I would give them some route to legitimacy with a multiple use license for around the same price as Coda. You might be surprised at how many small fish there are.

Good luck with this, hope you get the chance to add some navigation within the pop-up; I love Apple's approach, putting thumbnails under the main photo.
Anonymous stantheman 2/08/2008 11:36 AM  
stantheman: Actually, I only deleted one post here and its reply — a (funny) but super-off-topic troll regarding foreigners that would have caused instant collapse of these comments within milliseconds. :) Anyway, I read everything, and I'll certainly consider a more small-time-friendly licensing option if there's enough demand and it makes sense. RIght now, like I originally said, this is just a huge experiment. :)
Blogger Cabel 2/08/2008 11:42 AM  
This is totally awesome. You'll be hearing from me (to the tune of $40) when I launch my commercial web site in about a month.

I did notice that, occasionally, an image will zoom down to a point in the center of the page (with a comically oversized close box hanging off). This happens exactly once every time I load this page, in every browser I've tried (and I've tried most of them). It appears related to the "Loading" graphic, and usually happens fairly early, e.g. on the third or fifth image you click.

(Also, I've been clicking images in fairly rapid succession to test how well this deals with trigger-happy users, if that helps.)
Blogger Ryos 2/08/2008 11:56 AM  
Hi Cabel,

I'm getting the same endless zoom-in, zoom-out, repeat to infinity bug Kristian mentioned earlier (Safari 3.0.4).

To replicate.
Click on a thumbnail.
Click on same thumbnail again BEFORE the image has zoomed in (e.g. while the spinny wheel is still spinning).
When image zooms in it goes into an endless zoom in zoom out loop.

If you can't replicate let me know and I'll see if I can get a screen capture movie or something.

Haven't tested for it in other browsers.

Cheers,

Dave.
Anonymous Dave 2/08/2008 11:59 AM  
Dave: I think you've got a good case, and it helps that my internet is slow right now. :) I'll try to do some debugging right now! :)
Blogger Cabel 2/08/2008 12:04 PM  
RE: a smarter licensing option.

Awesome, I had pretty much written off using your script until I read that. My problem is only partly the price although, yes, it really should be in line with the cost of developer licenses for templates. A much, MUCH bigger problem than price is that I don't want to muck around with payments for every single website I create - imagine if you had to take out your credit card every time you used coda. Most of us would LOVE to have the luxury of spending weeks working on one site, like in the old days, but now we have to work much faster, slapping together standard elements, none of which require per-use payment. I bet most of the people saying what great value $39 is will end up using it on more than the site they license it for, more out of laziness than dishonesty!
Anonymous PhotoCynth 2/08/2008 12:07 PM  
Hey,

I noticed something that could be considered a bug...

If you click on all the images without closing them something happens in safari. Find an image with a caption. Then click on one that doesn't. The caption box stays there and then the little stuff doesn't go away.

Jeremy
Anonymous King Kovifor 2/08/2008 1:18 PM  
Awesome script, Cabel. It's exactly the lightweight solution I've been looking for to use on my portfolio site. Thanks for sharing your work with the rest of us!
Blogger Allan 2/08/2008 2:33 PM  
I thought I'd throw out a request...

It sure would be sweet if this could support transparency.

I tested it with an image that had a circle shape surrounded by transparency...and the FancyZoom just uses the overall width/height of the image and adds the shadow behind that. It also takes the background color from the container div and makes it the background of the transparent areas in the "zoomed" image.

If transparency support were possible, I could see a bunch of other uses for this, beyond just image display.

Again, thanks.
Blogger Ben 2/08/2008 2:49 PM  
I tried it is notworking notzoomed as shown in your example but opens in a seperate window.
raghavendra
Anonymous raghanna 2/08/2008 4:08 PM  
Not sure about any others our there, but I for 1 think 40 bucks is *CRAZY*

...then to add "per site" and I'm thinking you're on drugs!

I'm all in favour of 'shareware' but try to keep it real

- You weren't a record company boss in a previous life were you?

Dave Morgan
AU
Anonymous Anonymous 2/08/2008 6:13 PM  
Hey Dave! Like I've said previously in this thread, if your site is non-commercial there's no need to pay, and if your web design clients don't want to pay for crazy image zooming, then there are lots of other good scripts that are totally free! It's really intended for companies who want to add this effect to their site. Ultimately, really, seriously, it doesn't even matter that much. :)
Blogger Cabel 2/08/2008 6:28 PM  
Cabel: I know you must be TIRED of answering questions about licensing by now (sorry!), so I'll duck down and just toss one more over the fence. Do you consider government use to be commercial or not-for-profit? (For example, if a government agency wanted to use the script in one of its sites?) By definition, government *is* non-profit, but license agreements typically explicitly group government/non-profit use together, and your license doesn't mention government, so I just wanted to clarify. Thanks!
Anonymous Scott 2/08/2008 7:28 PM  
Leave the poor man alone and let him sell his work. :)

Seriously, compared to all the other costs involved with developing and launching a commercial website, $40 is chump change. We're a very small "mom 'n pop" launching an internet store for our home-based business, and $40 is chump change for us.

This is a luxury, plain and simple. It's head and shoulders above the solution I was going to launch with (opening a new window), but if I couldn't afford the asking price it would have worked just fine. We don't have the resources to develop something like this in-house, but for $40, I'm sold.

The only really valid argument I've heard is from the guy who does several web sites a day. (Several a day? What the heck kind of web sites can you produce several of per day?) However, here's a thought: Cabel seems to be pretty flexible on this. Why don't you send him an email and negotiate a multi-site license?
Blogger Ryos 2/08/2008 8:45 PM  
Whoa- look at all this hype, Cabel. I'm proud of you :-) I'm gonna download Safari (and delete Mozilla) just to check this out..
Blogger Aerodyna 2/08/2008 8:46 PM  
Hmmm, interesting conversation overnight, clearly a big divide in opinion.

Ryos is right - Cabel has read our posts and has suggested that he might introduce changes in the future, but it is pretty clear that, for now, this offering is aimed at either non-commercial users or those who can afford $39 per website.

Quite a few, like Ryos with his one-off website for his own business, can, whereas a guy cranking out 2 or 3 blogs or small business websites per day at a hundred bucks each cannot.

It is Cabel's baby, he can do what he wants with it. It is a pity because it is a great piece of work but, of course, the vast majority of potential purchasers are going to shake their heads, wonder what he's smoking and calmly pirate it.
Blogger donnacha 2/08/2008 9:56 PM  
Donnacha: The vast majority? What's your source for that figure, anyway? ;) Seriously, though, you're right — for now, this isn't going to be the best solution for a dude who charges a hundred bucks for a web site (!). To be honest I didn't even know there were people doing that for a living, making three websites a day. How do you even do that? This is totally shocking to me, and I hope to look into it more. (You got any pointers to companies like this? I'd love to see what these kinds of sites look like!)

I also totally agree with you that pirating something simply because you don't like the price is the ultimate stupid sandwich, with a 32 oz. ice cold cup of silly on the side. People will be people, sure. But if someone doesn't think FancyZoom is worth the asking price, that's 100% fine with me and literally no problem — but they should use one of many, totally free, totally comparable options instead, not pirate this one, yeah? If only we could all steal the things we arbitrarily think are too expensive. I'd start with snagging a jumbo jet. Those things are, like, millions of dollars!
Blogger Cabel 2/09/2008 12:02 AM  
Scott: Nah, I don't mind answering these questions at all — like I said, it's all a bit of an experiment. :) (I would, admittedly, prefer to talk about ideas and bugs, though. :))

Anyway, tonight's gut says that the script should also be free for educational / governmental use. Why not? Go for it!
Blogger Cabel 2/09/2008 12:33 AM  
Thanks for leaving a reply Cabel.

FYI I too offer 100$ pages (usually 2-3 page sites) put together with Sandvox, RapidWeaver or iWeb.

My point is that the tools I use to code these cost me (and yes, I'm fully paid up) 79$, 49.95$ and free with my new mac (I bought during the Black Friday sale), respectively.
- you don't have to be a genius to see where I'm going with this logic...

Anyway, suffice to say, I echo what 'ryos' said - alas, I'm sure 'Donnacha' is bang on the money (even if you're not!)

Finally, you're putting in a lot of effort to this when imo you ought to be working harder toward coda v2
- you got my 79$ bucks there
-- and man are you running a l-o-n-g "limited time" offer!
*There are time limits on that you know.


Dave Morgan
AU
Anonymous Anonymous 2/09/2008 2:28 AM  
Dave: Actually, I'm not a Cocoa programmer. Me working on FancyZoom has absolutely no bearing whatsoever on Coda programming. There are other guys at Panic, working on future versions of Panic software, including Coda. We work hard and try to do things the "right way" so things can take time. But the #1 thing to remember about Panic (and I should probably make a blog comment FAQ some day): everyone is always working on many things always.
Blogger Cabel 2/09/2008 2:37 AM  
Nice update, glad our whining hasn't entirely distracted you from coding :)

The source for saying that the vast majority of designers are, now in 2008, cranking out lots of sites for very little money is simply common sense, looking at the freelance bidding sites and looking at the web itself.

I'm not talking about intricately crafted sites with custom Kenichi Yoshida icons, I'm not talking about corporate sites with fulltime inhouse designers, I'm not talking about sites made for small businesses getting taken for a ride on their first website, naively letting the designer stretch the work out for weeks.

I'm talking about the literally millions of websites that are churned out every week in the hopes of getting just a click or two per day. I'm talking about the sites that are commissioned online by small businesses who got burned last time but now realize that a templated website is no harder to design than a business card.

What do these mass-produced websites look like? They can look great - it's all about the template you use. In under 30 minutes, I can register a domain, hook it up to Google Apps for email, point it at a server, install Wordpress and have a site that, apart from the logo, looks just like yours. You know that.

Most Web design, counted on a per domain basis, now happens in gigantic battery farms in India and even American designers have to compete against that. Hell, most street level American and European designers now spend their days trying to get customers and outsource most of the actual design work.

If, as you say, you want to find out more, take a look at the Sitepoint marketplace, it's interesting to see how jobs get broken up and outsourced.

With regard to pirating, you know it isn't the same as snagging a jumbo jet :)

Every person who has reacted angrily to your license terms is someone who was actually willing to pay - the price and license terms would be completely irrelevant to people who intended to pirate anyway, so, they wouldn't bother posting. I suspect that the people who posted, both favorably and unfavorably, represent only a tiny fraction of people who have downloaded and will use FancyZoom in their commercial sites. Very few will ever pay you anything, simply because they are used to around $50 - $70 for unlimited use scripts and, believe me, it took a LONG time to get designers to accept that it was worth paying anything for themes and scripts!

They certainly don't have the TIME or patience to come back and pay every time they use a piece of code. That is simply an unworkable proposition for anything less than a major script, like a forum.

Most people do pirate, but first they have to justify it to themselves. For instance, I have always thought that a certain amount of the vitriol directed at Microsoft is because people want to justify, to themselves, pirating their products. In the case of FancyZoom, the disbelief and exasperation expressed in the design forums and IRC is simply a way for the group to reach a consensus that it is okay to pirate your script because you don't understand the realities of Web design at street level.

As you say, none of this matters, I'm sure this is just pocket money for you, just an experiment to see how much people might be willing to pay. You might be annoyed over the coming years when you keep coming across unlicensed use of your work but there won't be much you can do and you'll keep generating a reasonable stream of income from the tiny fraction of designers who are willing to pay repeatedly. You won't realize or feel bad that you could have made way more by offering a license that made sense to a wider range of designers.

So, it's all good.
Blogger donnacha 2/09/2008 7:33 AM  
Just a note (for the old guy who doesn't use RSS much!):
When this page is viewed in its RSS feed in Safari (i.e. via feed://www.cabel.name/atom.xml), the zooming doesn't work at all.
I initially was mystified what FancyZoom was about at all since looking at the page in the RSS feed (which is the way I read lots of pages - I don't bother going to the actual site, I just read the RSS feed with length set to max), clicking on an image just brought up that image in a new page like usual.
Anonymous hayne 2/09/2008 8:03 AM  
Awesome. thanks.
Anonymous Anonymous 2/09/2008 9:24 AM  
Thanks a lot for this, I think it's great.

I've put it in place in my little art gallery:

http://cloudking.com
Anonymous Tim Murtaugh 2/09/2008 9:44 AM  
Donnacha: Thanks for the very thoughtful, and very helpful, reply. It's great insight into a class of web designer I didn't know existed, and I'll absolutely keep it in mind for the future of FancyZoom. (Please toss me an e-mail, in case I have questions in the future.)
Blogger Cabel 2/09/2008 9:45 AM  
First of all, this is totally awesome. Thanks for providing it.

Second, would you be willing to let me roll this up into a Wordpress plugin to make it easier for less technically-inclined folks to use? I'd make sure your license terms were front and center. The only change I envision making is to change it from opt-out (rel="nozoom") to opt-in (rel="zoom").
Anonymous Stephen 2/09/2008 10:27 AM  
Cabel, truly great script! I love the effect and the slick image goodness. I'll drop a line to the info@ address to sort out paying for it.

One request though: would you consider adding .mov support? I don't mean for regular linear QuickTime movies - scaling those doesn't make much sense. But for QuickTime VR content this would be utterly wonderful! It should set the mov's scale set to "ToFit" (to scale the VR content within the movie 'window'), and then just scale the movie itself to the user's window...

This would be a seriously cool ability, and something I would *love* to use on my own sites (such as http://www.panoramapostcards.co.uk/) and (paid for of course) on client sites too!

Keep up the creative madness, and maybe I'll see you in MWSF next time...

Keith
Blogger Keith 2/09/2008 10:33 AM  
Awesome script! I really enjoyed viewing the photos. I see you're a fan of Jollibee, too.
Anonymous Dennison Uy - Graphic Designer 2/09/2008 11:17 AM  
Can't comment on how it looks, but I would like to weigh in with a request to make it work in Opera, truly the world's best, most innovative, and arguably most standards-compliant browser out there! It's my main browser (only Google apps like calendar and docs seem to break in it) and I would never implement anything that breaks in Opera. Thanks for the hard work so far though.
OpenID alanh 2/09/2008 11:59 AM  
with the small type i thought it said "you can even hold SHIT when you click an image".

the mac tradition continues!

:)
Anonymous jason 2/09/2008 12:00 PM  
As soon as I request Opera compatibility, there it is. Nice. Thank you!
OpenID alanh 2/09/2008 12:04 PM  
Question about installing: Your instructions state the following: "...upload the two folders inside the package to the root of your webserver." I've unzipped the package and there are no folders at all. I'm confused.

On a side note, I tried Lightbox with a PVII navigation script and the two wouldn't work together. Finally gave up on Lightbox and am hoping this will work.

Thanks,

Mim
Blogger Mim 2/09/2008 2:35 PM  
This is absolutely beautiful and I was really excited to install it BUT....

It conflicts with the Anarchy Media Player plugin for Wordpress.

With your script installed, the embedded window player for this plugin disappears and only displays the "Download." hyperlink for the video.

Is there anyway to avoid this conflict because I'd sure love to use yours!

Thank you.
Anonymous Jim 2/09/2008 10:19 PM  
Great little tool now I have to decide on the new Shadowbox or FZ. Hmmmm.
Anonymous Anonymous 2/10/2008 9:58 AM  
Cabel - so glad that you published this! Panic does it once again.

Ironically, I've got a project ready for just this very thing.

Cheers!
Jeff Powell
Denver, CO
OpenID powellj@mac.com 2/10/2008 10:38 AM  
Very nice. But I would like to see:

- ability to add border (and set border color and width)
- ability to set the close 'x' in a different corner (top right seems more intuitive)(odd that the magnifying glass is bottom right, but close 'x' is top left)
- some way to disable FancyZoom from certain images

I don't mean to be critical - I just want it to be even better!
Anonymous snoogly 2/10/2008 11:52 AM  
Snoogly: You can already disable it for certain images (check the "Advanced Notes" above). But your other suggestions are noted — and the close box in the upper-left is kind of a Mac thing. :)
Blogger Cabel 2/10/2008 1:21 PM  
Looks terrible in IE6 and IE7. Did you really test this in IE?
Anonymous K.S. 2/10/2008 8:35 PM  
K.S.: It looks just fine on my IE6 and IE7 — the only notable code difference is there are no drop shadows in IE due to various painful IE issues. What do you see that looks "terrible"? Can you e-mail me a screenshot? Thanks!
Blogger Cabel 2/10/2008 9:01 PM  
There were some issues with Firefox on a Mac, but I'm not entirely sure whether or not they were caused by the reset.css I'm using.

The drop shadows were visible only at the corners, but this could be easily fixed by changing the background-attribute to style.background. The same style.background-change had to be applied to the caption background as well as setting vertical-align to middle.

There is, however, still a 1px offset at the top, which is causing a transparent stripe to appear just above the image.

Nevertheless, this has to be the best implementation so far. Nicely done!
Blogger kari.patila 2/11/2008 2:57 AM  
Thanks, Cabel, I really dig it! Have you considered allowing donations from non-commercial users?
OpenID Ben 2/11/2008 6:15 AM  
I like it. I would like to see a lightbox.js-like png background that diminishes the body from the zoomed image.
Blogger Anthony 2/11/2008 8:49 AM  
Nice, But anyone got it working succesfully on ASP.Net?
Anonymous Damien 2/11/2008 4:30 PM  
Somehow, my last comment didn't make it through (although I wasn't swearing or anything), so I'll just try again with a shorter version.

- FancyZoom is beautiful. And that's the best thing you can possibly say about a piece of software, IMHO. I bought it, added it to my website in just a few seconds, and I don't regret it. In fact, I love it.

- Do you have plans for previous/next image buttons? (cf. LightBox, for instance)

- FancyZoom appears to be descending from or at least related to a more generic script you also use for displaying dialog boxes on panic.com. Any plans to release that, too?
Anonymous Peter 2/12/2008 9:02 AM  
@Damien: Your choice of server-side language shouldn't have any bearing on this, since it's a client-side solution.

So, in other words, I don't see why it wouldn't work with ASP.Net just fine.
Blogger Ryos 2/12/2008 12:37 PM  
Love it!
Works great, looks great, and so simple.
Blogger lucasdigital 2/13/2008 1:53 AM  
Really pretty stuff!
I've made an italian post on my blog to make it be known!

http://www.britz75.it/flatpress/index.php?entry=entry080213-114158

(sorry for my poor english....)

Britz
Blogger britz 2/13/2008 3:11 AM  
This is cool, good job. If this is in the comments forgive me. The text is a small so I didn't want to go through them all.

I like the fact that this supports keyboard users, but it seems limited to opening the image. If I tab I go to the next thumbnail, but it remains hidden behind the first big image, and if I hit enter it reopens the same image.

When I got to the last one, since I had opened it with the keyboard, I couldn't close it at all unless I reloaded the page. Even with my mouse. It seems that there needs to be more slightly more refined keyboard support...

Maybe next version? I still like it though... it's very cool.
Anonymous Mike Cherim 2/13/2008 7:01 AM  
Mike: You can hit "Escape" on the keyboard to close the window. Maybe I should trap "Space Bar", also, to make it Quick Look style?
Blogger Cabel 2/13/2008 10:56 AM  
The first thing I did was check to see if it was keyboard accessible, in any fashion.
It was! Very, very good.
It only took me a moment to figure out the "Esc" key for returning to "normal" view.
Not to be facetious but, you can hear the sound of one hand clapping.
Blogger Steve 2/13/2008 1:22 PM  
> Mike: You can hit "Escape" on the
> keyboard to close the window. Maybe
> I should trap "Space Bar", also, to
> make it Quick Look style?

Thanks. I suppose if I were a full time keyboarder I would've figured that out. However, would it be possible to "trap" Enter? I ask because that is the action used to close it with a mouse (click). I'm no JS brain by any stretch so my question/suggestion may not be possible, but if it is, then it might be more intuitive to the more casual keyboarder like myself.
Anonymous Mike Cherim 2/13/2008 3:57 PM  
to put a 10px border on the image, add the following at line 63 in FancyZoomHTML.js:

inImage1.style.border = '10px solid white';
Blogger Pascal 2/13/2008 11:19 PM  
Fancyzoom is great and all, but being a Chilean I'm really insterested in your reference at the begining of the post, did you really came to Chile?
Blogger CRC 2/14/2008 5:22 AM  
For some reason I'm getting this large white box around the zoomed image on both Camino and Firefox (for windows). Any ideas on why this is happening? (URL in my name. Last two images in post)

Cool script though. Thanks!
Anonymous Kevin 2/14/2008 6:21 AM  
great script. I'm now building my new portfolio with it.
However I have two problems:
1-The flash object in the page always covers the target images. Any way to fix it?
2-Is there anyway to break the caption to more than one line? (I'd like to write longer descriptions)
Anonymous Yoni 2/14/2008 1:27 PM  
Hey Cabel, fantastic script, I'm experimenting for a client's site (will pay you when we launch it!). However, this client has a fetish for small scrolling divs, so you need to scroll to see more than a few of the images in this particular gallery.

The problem is that after a scroll, the images still zoom up from their original starting position. Should I add an observer to call prepZoom() or something at the end of a scroll? (looks like these positions are set by the zoomIn function, but this doesn't seem the appropriate one to call)
OpenID concrete 2/14/2008 8:05 PM  
concrete: send me an e-mail with your page URL. I'd like to see this in action.

Yoni: Unfortunately, Flash movies are always above everything. Same with Quicktime. I don't know of any way around this. Multiline captions are a good suggestion!
Blogger Cabel 2/14/2008 8:17 PM  
how bout having a caption (or part of it) clickable?
also: i'd like to be able to show more than one image i.e. to have an arrow on the right that will lead to another image.
it would be great if you can do it
Anonymous yoni 2/15/2008 1:54 AM  
Wow this looks really cool!

....thank you for the hard work you put into creating it.

K
Blogger malerina 2/15/2008 1:21 PM  
click to view...click to close!

K
Blogger malerina 2/15/2008 1:27 PM  
i have a bug repport: i try it in a div "abosulte", if i zoom on a image in this div, and a close the div or load another set pic in this div, your zoom stay there and it's not possible to close it, i need to reload the page.

But it's a good work for a simple use.

Good luck!
Anonymous Anonymous 2/16/2008 12:54 PM  
I have made few improvements such as posibility to link images in map area tag (i need those for my pages), i will post codes ASAP. But at first, i will fix horrible look in IE6 - there's the problem with opacity of .png images -> we have to use .gif images in IE6 instead of png and in others we need to use .png, peace of cake :) I hope i will help.

Oh and there's posibility how to fix flash z-index, i will check this when i finish my personal work.

ps: camel thx for beautiful work - simply it's absolutely amazing :-)
Anonymous Titanium Power 2/16/2008 1:27 PM  
Well I have to agree with many. Way over-priced for a script that is in no way near a finished product. It's buggy in many browsers and requires a lot of rework of existing markup (wires events to all anchor tags that contain an image if you don't specify rel="nozoom"). What?

You're beta script isn't bad, but if you expect people to pay for software, you'd better make it cross browser compliant.

Sorry, as someone who gives to the web community without asking a penny, I get a little annoyed with the greedy.
Anonymous Anonymous 2/16/2008 5:42 PM  
Anonymous: Thanks for writing! At this time I'm not aware of any known browser bugs with FZ, so please send me e-mail so I can investigate whatever you're seeing — otherwise I can't make any improvements. Thanks in advance, I look forward to your e-mail!

The very idea behind "rel=nozoom" is that you DON'T have to rework existing markup. How many times do you link specifically to an image without wanting it to just zoom inline? Instead of modifying everything you want to zoom, with FZ you just change the ones you don't want to zoom. Feel free to e-mail me also if there's a situation where this doesn't work well.

Finally I don't actually expect anyone to pay! Not with so many excellent free alternatives. But it's sure cool if they do! Don't forget, FancyZoom is free for non-commercial use.
Blogger Cabel 2/16/2008 6:20 PM  
You're completely right about the rel="nozoom" technique. It would be a fairly rare occasion where you would need to tweak the markup.

I'll send you an email about the various issues I've seen in a variety of different browsers.

I am finishing up a server control that allows users to select whichever zoom technique they prefer and I'd love to include FancyZoom, but I don't want to have to bother with the licensing issues.

My apologies if my previous posted sounded snappy, that wasn't my intention but after re-reading it; it obviously was.
Anonymous Anonymous 2/16/2008 8:59 PM  
http://www.ajaxload.info/

Use that one for loading indicator - it's much better than 12x gif loaded by and internal script - you will get cleaner and lighter code.
Anonymous Titanium 2/17/2008 2:55 AM  
Love it! Would need two enhancements to work for my site:

1) Any chance to have the onclick only handling zoom when it's hitting the small magnifying glass? By default, I have a navigation tied to the click event.

2) My page uses thumbnails for all images served for best quality and bandwidth reasons. Would it be possible to make the zoom work on the real, full-size image instead?
Anonymous andig 2/18/2008 2:55 AM  
Thanks Cabel - this is a fantastic bit of code. But I noticed that it's causing a problem when used with MooTools (or MooTools is causing a problem when used with FancyZoom...) Here's an example of how FancyZoon gets funky when used with MooTools. Any suggestions anyone? I'm not much of a code ninja.

http://www.thecleverest.com/fancyzoom_and_mootools.html

Thanks!
Mike
Anonymous Mike 2/18/2008 7:56 AM  
Dear Cabel,

this is a very great solution for webdesigners! Instead of applying a zoom-effect to each individual image, it can be added to a whole page at once.
Thank you very much!
Blogger Pieter Beens 2/18/2008 8:55 AM  
man if this could work with a flash video from Blip.tv/YouTube embeded html that would be AMAZING
Blogger Benji 2/18/2008 10:11 AM  
neat-o Cabel, thanks. However, clearly I am an idiot because I cannot get this to work. I even made a page with only an image on that links to a big version. Follwed the instructions, uploaded the files, but...no zoom. What the heck? anytime in your day to help out an easily stumped person?
page here: http://www.gwcreative.com/zoom.html

Thanks, Greg
Anonymous Greg 2/18/2008 12:24 PM  
Hi Greg, check the code in the head of your page. Try script src= rather than link href=
That should help.

k
Blogger Keith 2/18/2008 12:33 PM  
Hey Cabel, great code!!! Sweeeet!

But...I had just one problem, it doesn't seem to work when I place the code in an image loaded via Spry??? Any ideas???

This is the URL:
http://www.ballarat.edu.au/ard/artsacademy/pogallery/index2.shtml

S

PS: If we can get this to work we will be buying a license.
Anonymous Anonymous 2/18/2008 3:55 PM  
S: It looks like your HTML source contains placeholder tags (i.e. {image}), so when FancyZoom runs through the page on load to find images, it doesn't find any. I'm not sure how you could get it to work, other than alter your code so that setupZoom() is only executed after your placeholder links have been replaced with the real links... wish I knew more about Spry! :)
Blogger Cabel 2/18/2008 4:09 PM  
raison d’être is French for 'reason for existing' or similar. I hope for your French teacher's sake you used BabelFish with that...
Anonymous Anonymous 2/18/2008 5:12 PM  
Concerning the flash z-indexing horrors:

Thickbox seems to have conquered it across most browsers and systems. I'm having no problem with zoomed images over flashobject-embedded flash and sIFR 3 flash text.

If you can fix this, I'll be purchasing a license.

Also, you might be the sexiest man alive. Thanks for the hot script.
Anonymous Josiah 2/18/2008 10:25 PM  
This is a nice script. But it doesn't respect the original aspect ratio of the images. It makes all images the same width/height when zooomed. But I had some landscape and some portrait photos. The portraits ended up all distorted.
It would be great if this could be fixed. Until then I can't use it.
Blogger CircleMed 2/19/2008 1:36 PM  
CircleMed: Not true — fancy zoom does maintain proportions. So, if you can e-mail me a sample page, I'd like to check it out.
Blogger Cabel 2/19/2008 1:49 PM  
I just figured out what triggers the IE6 flashing bug. If the user hovers over an image long enough for the little strip of buttons to appear, then clicks the image to close it, the entire page will flash repeatedly as the image is closing. It's really quite spectacularly horrible.

I wonder what percentage of the ~50% of Internet users who are still on IE6 will blame their stupid browser for this atrocity instead of our web pages? :r|
Blogger Ryos 2/19/2008 4:43 PM  
Thanks for a great tool.

Has anyone else tried FancyZoom with a Firefox browser (v2.0.0.12) or Opera on Linux? The images zoom very slowly compared to Mac & Windows browsers.

Any tips?
Anonymous Anonymous 2/20/2008 11:35 AM  
Cabel,
v.nice code!
Does a University web site require a license?
Anonymous Nic 2/20/2008 5:27 PM  
There is no shadow of any kind in IE7! Does somebody has a solution for this?

Thanks in advance!
Anonymous Trax 2/21/2008 1:04 AM  
can you check my site?
Maybe you can give me some clue by watching the
source code.
I'll appreciate it.
Jin
Anonymous Anonymous 2/21/2008 7:47 AM  
whoops sorry
http://www.gazaebal.com/qwe/index.html
can you check my site?
Maybe you can give me some clue by watching the
source code.
I put all your files in folder "qwe".
I'll appreciate it.
Jin
Anonymous Anonymous 2/21/2008 7:49 AM  
Love it ... will surely use it on my next scripts as it is so easy to integrate.
Great work
Blogger Sava 2/21/2008 12:50 PM  
Easily the best script I've seen on the net, ever. Thank you so much.
Anonymous Anonymous 2/22/2008 1:19 PM  
Thanks a lot sharing with us this software.

It looks incredible!
Anonymous Luisa 2/23/2008 11:38 AM  
sometimes clicking on an image presents a wrong image. can you please have a look and let me know?
thanks
http://www.yonialter.com/
Anonymous yoni 2/24/2008 8:32 AM  
also: I'd really use the multi-line description function. any chance it can be added soon?
Anonymous yoni 2/24/2008 8:38 AM  
REPORTING BUG:
(too many comments down here, i don't have time to read them all and maybe this was already discussed. Sorry about that.)

Btw, it happens that clicking on the thumb sometimes it opens no image.

For example, I just went here and clicked and it didn't work, the following clicks just worked fine.
But you know, that wouldn't be a nice thing to happen in front of the client :)

That prevents me to use this nice gadget, sorry :(

zage
Blogger Zage 2/26/2008 12:27 AM  
Stolen from www.panic.com
Anonymous Anonymous 2/26/2008 4:42 AM  
Wow ... attack of the anonymous idiots!
Blogger donnacha 2/26/2008 6:18 AM  
"Wow ... attack of the anonymous idiots!"

I totally agree with you :-)
Blogger Sava 2/26/2008 6:27 AM  
Any way to make this work with Gallery2?
Anonymous Anonymous 2/26/2008 7:10 AM  
Hey emd, you can safely place the files wherever you want by changing the value of "zoomImagesURI" at the top of FancyZoom.js. Just FYI.
Blogger Ryos 2/26/2008 6:49 PM  
how can I make the description text or part of it a hyperlink?
Anonymous yoni 2/27/2008 5:13 AM  
My zoomed images are flying in from the right side instead of coming off of the thumbnail. I have not modified the js files at all. Any ideas what could be causing this?
Blogger John 2/27/2008 8:26 AM  
FYI I had some display issues. This is because my default table style adds a 1px border and padding. I just had to add a couple lines to my css file for "#ShadowBox table, #ShadowBox tr, #ShadowBox td" setting the border and padding to 0 and fixed it. Posting here in case others run into the same problem. Also if you have display issues the firebug extension in firefox is invaluable.
OpenID vrillusions 2/27/2008 12:15 PM  
My compliments to the Javascript chef! In fact, I am probably more admiring of your patience in moderating what has become a support forum and open debate on what constitues "commercial," while also helping people find their consciences, their wallets, their lost keys, a missing puppy... Geez.

If some of you folks followed Cabel for half a minute, you'd know that he's a.) not some evil mastermind (though I have heard is has been assigned as arch-nemesis to Wil Shipley) and b.) he's not trying to double-talk you into doing something you're not comfortable with. Can nothing be done on the internet with good intentions and compensation be requested without a gaggle of "we want it cheaper" zombies coming out of the woodwork? He gave you free alternative ideas! He tactfully didn't tell you to go grab a few Javascript books and learn it your darned self (I'm tactless, so I will).

This goes on my blog shortly, and I'll pay for it out of MY OWN POCKET if I have to for each commercial web site I produce, because it makes my life simpler, and makes me look awesome, which, in turn, gets me more work and more money. How hard is this?
Anonymous Anonymous 2/27/2008 7:40 PM  
Hey,
Works great on firefox, but with IE7 it's really slow.
Blogger vincent 2/29/2008 9:13 AM  
Wow -- It's REALLY slow in IE7. Any chance of fixing that?
Blogger Steve 2/29/2008 12:49 PM  
Hi Cabel, Thanks for the great script. For those who were concerned with the zoom effect being covered by a flash movie it is an easy fix. All you need to do is republish the movie with the WMODE setting set to transparent in Flash Publish Settings. Then change the parameters in your web editor to WMODE, style transparent and the zoom will be on top.
Blogger JConway 2/29/2008 2:17 PM  
This is great. I plan to purchase it. How hard would it be to black/gray out the rest of the page when zooming an image? I am running a photography site and it would be nice to see just the image when zooming. I would pay extra to have this feature :)

Again concrats on a great job!
Blogger Greg 3/02/2008 6:26 AM  
Hi Cabel,

is there a version of FancyZoom that allows a movie gallery to be loaded into it? or rather is it easy to modify FancyZoom to do the below?

Basically the user clicks on a link "movies" this loads fancy with thumbnails of different movies and QT player that plays them within FancyZoom.


Thanks,

S
Anonymous Anonymous 3/02/2008 3:49 PM  
Nice work! About to make a payment for a site we're developing, to go live next week. I'm also seeing the 1px white line on the top and left side when zoomed in Firefox. Any chance of a FancyZoom 1.2 soon to fix this?
Anonymous Jeremy 3/04/2008 2:30 AM  
How can I use this on a blogger hosted blog (e.g. x.blogspot.com)?
Anonymous Anonymous 3/04/2008 11:41 AM  
hey, way cool js. Where abouts is that Jollibee? in the states? I am a filipino in NZ and was surprised to see your photo of the jollibee. cool, glad to see non-filipinos eating there too, even if the food to you is a bit different.
Blogger NZPinoy 3/04/2008 6:36 PM  
How can I get this to work on Permalinked pages in Wordpress? The image zooms but the title oval and close box are gone...
Blogger Sean 3/04/2008 7:29 PM  
very nice, modality would finish it off nicely :)
Anonymous Anonymous 3/05/2008 1:21 AM  
Hey, love the script, just having the same problem as someone stated above. When I have the image clicked, it brings up the URL of the alt image, however it completely screws the dimensions of the original image and shrinks it to fit its own box.

The URL i'm testing it out on is:
http://www.infernochicago.com/zoomtest.htm

The original image it should go to, and the original size it should be can be seen here:
http://infernochicago.com/sensualflyer.jpg

Let me know if there's something I'm coding wrong, or could code different to have the on-click pull the image to the original size.

Thanks!
Anonymous Inferno 3/06/2008 12:16 PM  
This is another great Lightbox clone. I think it might do well with a dark background but maybe I'm just used to seeing that effect.
Anonymous jive 3/06/2008 1:34 PM  

Post a Comment

 
 
 
   

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