Update: Version 1.1 released 2/8/08. Good bug fixes + Opera compatibility!
...so I fought back the charging Guanaco, immediately hopped on my paraglider, and basically caught the first flight out of Chile — but not without dealing with some cantankerous customs inspectors while drinking a cool glass of chicha. Really sorry it took so long! But hey, two years later, it's finally done!
Smooth Javascript Image Zooming For Your Web Pages
This much-requested chunk of Javascript to zoom images inline, originally written for this blog but later rolled out to the Panic website and used for screenshots, is now polished up, bug-fixed, available for you to use on your website!Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom's raison d’être (French for "raisin-determination") is providing a smooth, clean, truly Mac-like effect, almost like it's a function of Safari itself. Since I originally wrote this script, there are now a lot of image zoomers to choose from (including a similar effect now on Apple's own site!), such as the popular (and inspiring) Lightbox. So you might be asking: "Cabel, why use FancyZoom?" Well, here's why!
- Focused on the smoothest, most polished zooming animation possible
- Automatically scales images from any image link, with no HTML changes
- Preloads full-size images in the background on link mouseover
- No resource-heavy Javascript libraries — 100% coded from scratch to zoom
- Draws a nice drop shadow under the full-size image to offset it from the page
- Uses Safari 3's "box-shadow" feature to draw the drop shadow natively, no images required
- Requires only two new lines of code in your HTML
- Tested and works with Safari, Firefox, IE7, and IE6. (Looks better in modern browsers.)
Since FancyZoom is so easy to add to a web page, I encourage you to give it a try!
Instructions
Installing FancyZoom on your web pages should be dead simple.1 Download the FancyZoom package, right here:
2 Using Transmit (or your favorite FTP client), upload the two folders inside the package to the root of your webserver.
3Add the following two lines of code to the <head> section at the top of your web page(s):
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
4Add onload="setupZoom()" inside your page's existing <body> tag. For example:
<body id="whatever" [...] onload="setupZoom()">
5Whoah. You're done! The rest is automatic — links to images in your page will automatically zoom the images. For example:
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a> will zoom up image.jpg when clicked.
Additional Details
There are a few extra notes that you might find useful.Want to add a caption? Add a title tag in your href. That's it!
FancyZoom will use the size of the first element in the href to determine the initial size and location of the zoom.
FancyZoom works best if you wrap your href around a thumbnail, but also works from text-only links to images.
FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.
If you're a Javascript hacker, FancyZoom's flexible fadeIn and fadeOut functions can be used for all sorts of fun stuff.
If you explicitly don't want an image to zoom, add a rel="nozoom" tag to your href.
Example
It's both an example, and some random pictures from Macworld Expo 2008!
Release Notes
Version 1.1 released 2/8/2008.- Improved Opera compatibility
- Fixed an issue that would cause crazy infinite zooming
- Improves caption behavior in certain situations
- Now returns any alt-clicks and command-clicks back to the browser, for standard behavior (open in new tab, etc.)
License
FancyZoom is totally free for your non-commercial website.In a bit of an experiment: if your website is commercial (i.e. makes you money), you can license FancyZoom for $39 per site, a one-time fee. Instantly add nice image zooming to your site. Click here to instantly and securely buy a license.
Enjoy
I hope you and your websites enjoy FancyZoom. If you make any cool changes or improvements, let me know! And if you have awesome feedback, or find weird bugs, drop word in the comments.PS: Yes, you can even hold shift when you click an image. The Apple tradition continues!
posted at 1:21 PM
426 Comments:
«Oldest ‹Older 1 – 200 of 426 Newer› Newest»I'd prefer a white border around the image to offset it further, but that's not a major thing.
I'm sure the faithful readers of this blog are using something a little more modern then that though.
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.)
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. :-)
Some people say yes, some say no, so I'd love to know your opinion. :)
Your Father
THANK YOU!!!
http://avaelliot.com
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.
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
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. ;)
Any chance you could elaborate?
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?
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.
Actually, I think it's wholly appropriate that it is noted without comment.
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)
You're a champ. Thanks.
Thanks so much!
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.
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?
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.
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.
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!)
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?
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
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.
… 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.
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.
thanks for these fancy lines of code!
what about shortcuts?
"x", "c" or "w" for close, or the arrowkeys for forward etc.
http://www.apple.com/macbookair/design.html
"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."
It doesn't work in Opera though.
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?)
btw thanks for a great little lib.
Great job!
Dominic Morin
www.zypto.com
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
Otherwise: Brilliant! I'll be using this!
k
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.
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!
--------------------
we love T-shirts
http://www.dexflu.eu
Thanks,
Tom T
365 x $39 = $14235, more than my pay!
Nice script, greedy man.
"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.
Great script! I'm installing it on my non-comm site now, would be pleased to pay for it in the future.
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.
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.)
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.
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!
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
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.
raghavendra
...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
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?
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.
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!