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
651 Comments:
Read more commentsI'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!
Anyway, tonight's gut says that the script should also be free for educational / governmental use. Why not? Go for it!
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
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.
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.
I've put it in place in my little art gallery:
http://cloudking.com
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").
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
the mac tradition continues!
:)
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
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.
Ironically, I've got a project ready for just this very thing.
Cheers!
Jeff Powell
Denver, CO
- 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!
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!
- 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?
So, in other words, I don't see why it wouldn't work with ASP.Net just fine.
Works great, looks great, and so simple.
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
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.
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.
> 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.
inImage1.style.border = '10px solid white';
Cool script though. Thanks!
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)
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)
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!
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
....thank you for the hard work you put into creating it.
K
K
But it's a good work for a simple use.
Good luck!
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 :-)
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.
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.
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.
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.
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?
http://www.thecleverest.com/fancyzoom_and_mootools.html
Thanks!
Mike
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!
page here: http://www.gwcreative.com/zoom.html
Thanks, Greg
That should help.
k
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.
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.
It would be great if this could be fixed. Until then I can't use it.
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|
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?
v.nice code!
Does a University web site require a license?
Thanks in advance!
Maybe you can give me some clue by watching the
source code.
I'll appreciate it.
Jin
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
Great work
It looks incredible!
thanks
http://www.yonialter.com/
(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
I totally agree with you :-)
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?
Works great on firefox, but with IE7 it's really slow.
Again concrats on a great job!
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
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!
Post a Comment