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
731 Comments:
«Oldest ‹Older 401 – 600 of 731 Newer› Newest»however reinvigorate's tracking script seems to break it. at least for me.
thought i let you know :)
I'm using fancy zoom for my portfolio and as I'm building and testing on a small laptop I noticed that the nice resize function to make the image fit in the browser shrinks the image in my tiny resolution. My much more talented other half came up with a fix to allow images to be taller than the browser window,should you want such a thing!
In the window size function he changed it to this
myHeight = window.innerWidth;
myScroll = window.pageYOffset-(window.innerWidth/4);
I haven't fully tested it yet but it's certainly working in safari and firefox on a mac.
Thanks for the fantastic script.
1. my pictures have different sizes, but the size gets stuck at the first one and all others are displayed with wrong size
2. during zoom it shows the last picture and on full it switches.
What can I do? :-((
See here: http://www.dm-com.com/PC_Hardware_test.html
I am trying to make it work for blooger, but it doesn't, how can I do that? Help appreciated.
it is possible with lightbox but is there anyone who knows how to get fancy zoom on an flashwebsite
cao
thanks
This is great work! But I need to know if it can zoom a div element that will have nested divs and a Photo of course! If not, please let me know if you would charge for the enhancements! Thanks.
--Alam
First, in FancyZoomHTML.js, we set inShadowTable.style.borderCollapse to ‘collapse’.
Second, for each table cell that displays an image in the foreground or in the background (i. e. for each cell except the one in the middle), remove the shadow image (be it foreground or background) and do <cell>.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+zoomImagesURI+"zoom-shadow<n>.png', sizingMethod='scale')";
This is it, we now have the shadow working in Internet Explorer—if we remove the ‘&& ! browserIsIE’ from line 95 of FancyZoomHTML.js, of course.
…
Third, we have to specify style.height for the second table row; we may as well not specify style.height for the entire table, should we wish not to do so. (At least this is the way how it works in IE 7—I am sure the previous points work for IE 6 but I am not sure about this one, although I think it should.)
I changed:
function getSize() {
// Window Size
if (self.innerHeight) { // Everyone but IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
myScroll = window.pageYOffset;
for:
function getSize() {
// Window Size
if (self.innerHeight) { // Everyone but IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
myScroll = window.pageYOffset-(window.innerWidth/4);
and the images are not taller than the browser window, sorry.
this plugin is exactly what I was looking for! :)
But I have some problems with displaying the png’s and the title. For some unknown reason the png’s doesn’t work with transparency except the shadows in Opera and FireFox. In IE7 even the shadows won’t appear. The closebutton appears a bit offset the picture. I don’t know if this should be like this but in IE7 it is positioned in the upper left corner without being outside of the picture wich looks better to me.
The titles whyever showing only the first word of the title and nothing more :(
I’m using WP 2.6 and Vista Ultimate. Any chance to solve this problem? For Opera and Firefox it would be okay to hide the close-button but i don’t know how.
Any help would be great!! This script delivers the most elegant way to load pictures. Don’t want to miss it.
Last but not least:
Is there a possibility to load Flash content with this plugin?
Regards from Berlin,
Jiggy
One feature request would be to enable next/prev buttons within the box, if only by using your numpad or something. But anyway, love the script as it is :)
I'm also considering installing it, but have not yet. I realize this is intended for use with modern browsers and see that "it does not work properly with Opera" but when it "does not work properly" with older browsers, how does it behave? Does it do nothing at all or does it still function "somewhat" in a limited way (open full-size image in separate window or similar)?
thk u
Thanks
JIM
one thing however
if you have a flash movie embeded on a page and then click a screenshot, the enlarged image goes behind the movie, well part of it anyway.
any ideas?
Jon
watch. you can use those money to invest in other industry which will return you good
profit.
watches ebayare made by the rating 1:1 according
to the original watches, and you can't distinguish the original and the fake watches when
you look at the surface of the watches.
batteries
Can i also Play video after Zoomming of thumbnail.
Thanks!
cool
for example the domain name http://www.gifttool.com will trigger the zoom effect even if its linking to and HTML page.
here is the faulty line..
if (links[i].getAttribute("href").search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)/gi) != -1) {
PLEASE!
I've been having troubles when trying the script in my localhost and in one old server.
When you click the image the script doesn't do anything it simply goes to de image url as if it was a normal link.
To solver:
Change:
[script src="/js-global/FancyZoom.js" type="text/javascript">[/script>
[script src="/js-global/FancyZoomHTML.js" type="text/javascript">[/script>
With:
[script src="js-global/FancyZoom.js" type="text/javascript">[/script>
[script src="js-global/FancyZoomHTML.js" type="text/javascript">[/script>
CHANGE "[" with "<"
And inside FancyZoom.js
Change line 44:
var zoomImagesURI = '/images-global/zoom/';
With:
var zoomImagesURI = 'images-global/zoom/';
Maybe it helps somebody :-)
thanks!
http://mythologica.fr/grec/artemis2.htm
and how do you use it on blogger. i see you using it on blogger. do i have to buy hosting services?
I dug through the code and it seems to be caused because the zoom function reuses an old copy of the pre-loaded image object. Luckily, I'm going to be using this on an Intranet so I just commented out the code in the pre-loading function that prevented the pre-load from re-running. This way the pre-load object to be refreshed on every mouse-over.
Great little script, well worth the $39 (just bought my license)!
Wasn't for me for months until I took the time to troubleshoot. I tracked down the issue to adblockplus (Firefox naturally). There's hundreds of filters in there and one of them was bunging up fancyzoom. Instead of going through them one by one (I'm not mad), I just disabled all those that had zero hits, refreshed the page with fancyzoom installed, and viola! it works now.
Would it also be possible to open a foto with FancyString clicking on an area-tag? Could you advice me ?
Thanks!
Fantastic script -- thanks so much. Curious, though: is there a way to adjust out fast the image fades in/out?
Thanks!
However, this is easy to fix by adding the following (only the bold lines) to FancyZoom.js, after line 213:
...
endW = imgPreload.width;
endH = imgPreload.height;
if ((endH + myHeight +1) % 2 == 0) { endH -=1; }
if ((endW + myWidth +1) % 2 == 0) { endW -=1; }
Cheers!
http://www.irrbert.de/zoomtest
and
http://worstcasestudio.de/login/Teamfotos/zoomtest.html
Greets.
====================================
Bruce Williams
http://www.sexxat.com/livechat.html
Is it possible to use Fancyzoom into IWEB? And if Yes, how can you do this. Drop the image into iweb and then?
Thanks for you're help
I tried it on my website, but is doesn't work..
First I had lightbox, so i deleted everything of lightbox but still it doesn't work.
I've checked the codes over and over but I can't find the problem.
Maybe someone can help? 'Cause I really want to use this!
?
I already changed every "img" in "a" and every "src" in "href"..
Thank you
Anica
I have small question, can I use your nice Ajax in my university website?
Thanks..
FancyZoom is a very nice tool, but I have a problem with it. Sorry, if my english is not ok - I write you from germany and I have learn english ago 40 years!!
Now, I have doing all, what you have written in your instructions, but the picture will not zoom as in your examples. I have build in a thubnail and will zoom another picture ( pls. see this code: [a href="../../images/traeger/GIVI-Traeger-Platten.jpg"][img src="../../images/traeger/th_givi-platte-E.gif" alt="GIVI Platte E" width="100" height="61" border="0" style="cursor:pointer" title="GIVI Platte E" onFocus="if(this.blur)this.blur()"][/a] ). Is this correct?
The site where this tool is bild in, is included as iframe. May be, is this the problem?
I'm happy, if you will give me an answer - perhaps in german ? ;-))
Greeting
Desmo
I'm linking to differently sized images. Say I open the zoom the first portrait-sized image - brilliant, looks great.
But, the next image is landscape. I zoom it and it retains the dimensions of the portrait image, meaning it looks totally pulled and strange.
Is this a bug? Is a fix coming? I'm using the latest Firefox...
Thanks!
Thanks anyone, P
I'm using a style on my "td" so when the title comes up it keeps the padding I set in my main .css file. Maybe you can use special class for your td that has no padding? or something to fix this?
Dimming the background is a must because it enhaces the effect and the focus is in the picture clicked
Any ideas or workarounds here?
is there anyone who can help me? Thanks before
ViNa
This WP theme pulls the image and URL from custom fields in the entry, not the standard Title and Post fields (the tool tip uses that data for the hover).
Screen shot of how the data is entered in WP:
http://img.skitch.com/20081112-djtujfyf131rm3xsrfkng1wwi8.jpg
I'm thinking that's where the problem lies. FacyZoom pulls the image but it doesn't seem to size or position it correctly.
I have a topic posted in the forum for the WP theme but figured I'd also post it here.
Great scrpt, nut i'm having trouble using it with tabber.js.
If i modify the body tag, somehow tabber.js doesn't show..
Of course i i don't do it... FanzyZoom doesn't show...
Any idea...?
Thanks
Any solution?
I tried to change de .js but et very dificult to understand by me...
Thank you very much!
Tobi
1. In Firefox 3 there's no zoom.
2. In IE7 the first image clicked zooms out to nothing.
Other than that, not bad.
inCol8.setAttribute('style', 'background: url('+zoomImagesURI+'zoom-shadow7.png);');
I hope this helps some other people.
Thanks
kevin
http://drupal.org/node/297945
I get a problem with the linking. I have put the maps in the root folder and followed the rest of the instructions but it won't work. I asked my self: why is there a slash ("/") in front of the links to FancyZoom.js and FancyZoomHTML.js?
So I took it away (so it became like this: src="js-global/FancyZoom.js") and it finally worked.
Except for the images that won't load and which also have the slash in front of them. How come? Can somebody help me?
//Dennis
my name is Massimo. First, let me say that you did a great work on this script. I wanted to ask you if there is an easy way to make the enlarged/zoomed images printable in any easy way. We try to have some tables or schedules that it will be nice to print after opening, but when we do that we get the whole page in the background. Any idea on how to fix it? Please let me know.
Thank you in advance, Massimo.
"var shadowSettings = '0px 5px 25px rgba(0, 0, 0, ';"
Started browsing the code and well.. I saw it right away.. Doesn't seem to affect it though.. does it matter?
www.baragar.net/personal is the location where I have tried the installation.
&, where are those cool Icon's you used? I looked through the CSS and can't find a reference to them. Thank you.
screenie here
http://jesgue.homelinux.org/other-files/fancyzoom.jpg
site here
http://www.yobonobo.es/bio/
I have no idea what could be going wrong. I am getting adequate visualizations (maybe not complete, but they look fine) on ie6 under wine (linux) and arora (which uses webkit). Konqueror (khtml) is in the middle. It shows something line in firefox, but the size of the popup is almost correct.
Andy
I think i found a bug in FF 3.0.5:
When I click on the image after page was loading and dont have moved my mouse yet, then the zooms starts without the image.
its only an enmpty container.
Greetz from germany.
From Argentina blessings!
Its perfect!!!! Thank you very much!! :)
Carlos
from brazil
Pat Anzanello
Its great man. So nice script by you. Is their any solution to zooming the div or table aspect of an image? Actually i want to zoom other elements like div, table, panel etc.
Maybe there should be a imgPreload.onerror event though, because sometimes you have html pages that have an .png or .jpg extension on it.
blogspot for example: http://1.bp.blogspot.com/_Q87phprIbdY/SXs_aRZSepI/AAAAAAAAES4/_boCLrkIbnI/s1600-h/Picture+1.png
This isn't an image. If you click on the fancyzoom link you'll get the preloadimage forever.
Looks like i will buy it for 3 sites.
Maybe 4 :-)
However i have a question.
Can i moove the caption so its ontop of the image?
Or even better on the image in the upper part?
Also is it possible to grey out the background (to make it stand out better) would look cool!
Sorry Im just being nit picky on a great (FREE) piece of code!
anyway, would love to have it back as clicking on images now jumps to the larger image on a new screen)
but if i want to launch the script from a flash swf, wich is the string or the actual function to call?
i've tried width zoomClick("pippo.jpg");
can you help me?
thx
Just one thing : is it possible to go to the next or previous images without closing the box ?
Maybe in a future update...
Thanks
WantAdDigest.com
Classifieds
But I have one question: I use lots of pictures with different formats in height and width and they are randomly chosen.
So when I click to enlarge the pictures sometimes FZ gets the wrong proportion in height/width in the enlarged image?
Does the js calculates the height/width anytime or only the first time I click an image?
Any suggestions?
(fahri (at) konse (dot) de)
Is it possible to redefine the width of the page?
I have a horizontal site and the enlarged image appears relative to the very left of the browser.
Example is here (with dodgy placeholder images):
http://www.wdmadvertising.com.au/facility-assist/
click "interior design"
the expand "recent projects"
and view "image gallery" :)
Any comments would be very much appreciated!
Thanks!
Joe Montibello
There is a problem with Fancy Zoom in Safari 4 Beta - there's no shadow.
It would be cool il you could fix that for Safari 4. Thanks. M
Please look at http://targmark.com/?page_id=5.
This is a test site for a web site I am working on.
The original images are at least 610px wide but zoom to only about half of that. How can I control the size of the zoom so it is the same as the original?
It's really a great script.
just installed and it looks great, thanks for sharing!! just wondering though my image when clicked do not zoom it just opens up the images url? how can i stop this and make it work correctly?
thanks,
bec
Thanks for building FancyZoom! For Wakoopa, I recently implemented gallery functionality into FancyZoom. I blogged about that here: Fancyzoom Image gallery functionality on kilianvalkhof.com
Cheers,
Kilian
Can you please tell me if I need to be hosting my blogger blog on a .com server or can I also use it at the blogspot address to use this terrific image zoom?
Thanks VERY much!!!!
Am I missing something?
Thanks Much - KJ
I love this script.
Is there a way to use it with quicktime files?
I've tried to play with it several times but can't seem to figure it out.
I have encountered a strange problem. The expansion in the same page works on some sites, but on others the expanded photo opens in a new page.
I cannot recognize anything that is different about those sites where FunnyZoom works and those that do not. The WP version is the same and, in at least one example, even the theme is the same.
Any idea what can fix this?
The package contains two folders: a) __MACOSX; b) FancyZoom 1.1:
Two questions:
1) Are these the two folders you write about in your installation note at the begining?
2) I have no access to webserver root since I use a shared webserver. All I can do is work on my /home/public_html folder, so: Will Fancy works if I copy the two menctioned folders in /home/public_html folder?
Thanks a lot in advanced for your help.
JM
htttp://www.sahibimolurmusun.com
http://www.morinekdizayn.com
Further, I respectfully suggest that the format of an extended Comment thread is not appropriate to supporting a product one pays for. There are many versions of open source forum software that would do a better job than simplying adding to one long thread that is years old and wanders about through various issues. I do not mind paying for the good work that this plugin is, but I expect a professional support system. My apologies if I seem emotional about it. I'm really not. It's the simple fact of what I think.
joehark@earthlink.net
Can anyone tell what I'm doing wrong? And please don;t make fun of my sloppy, awful HTML code...
Here's the page I'm testing this on:
http://dougkochmanski.com/2007/index_zoom.htm
Any help would be appreciated... I really want to use this!
But any way what have give is precious for beginners in web designing like me.
If u do not mind pls reply me to "shiyam06@gmail.com"
Thank you
Shiyam
I was wondering if you had tested this with MobileMe? Where would one put the files if they were using iDisk to store the files?
I was curious if someone would know how to have it fire right off the bat... (this code or the offshoot) I tried passing a click event and it works in FF but not IE... I did something like this
$(document).ready(function() {
$(".login").attr({"href":"#small_box"});
$('a.login').fancyZoom();
if ($(".errorLOGIN").length){
$("a.login").click(function () {
//alert ("Triggered");
$("a.login").fancyZoom();
});
$("a.login").trigger('click');
}
});
if I just do the trigger it works on both... but only FF passes the click event...
Any ideas?
Thank you
jeremyBass
(you can view the test on my sandbox/my url)
None of the default fancyzoom images were showing for me (close, shadoes, loading, etc.). I manually change the path in FancyZoom.js like this:
from:
var zoomImagesURI = '/images-global/zoom/';
to
var zoomImagesURI = 'images-global/zoom/';
And now it works in all the browsers i've tested !!??
Don't understand why this happened but I hope it is useful to you.
I need the image to be displayed at 100% regardless the size of the window. Thanks.
---
It's a great innovation. Thank you for the contribution to the great world wide web. cheers!
Is there a fix for the the ratio problem?
http://www.uize.com/examples/mag-view.html
Its simply amazin and free!!!
Any fix?
Btw, you should fix your comment posting form. There's something wrong on Linux box. The captcha field is too far below and you can only access it by selecting text and dragging it down (Im sure you understand)
Thanks!
thanks
do you have a clue to fix it ??
thanks
A greeting.
linkintech.com/test.html
When you click the logo the border doesn't have the nice border and the "x" to close it so looks ugly. Something's missing. Other question is how do I integrate this into wordpress which is written all in php and the code for this requires you to put stuff in the "head" and "body" tags which are not very visible in the complex wordpress php structure which would require me to learn the entire wordpress scripts to find how to integrate this. I already tried another program today called zoomthumb but it didn't work right and there is little to no documentation on it.
i have found a few tutorials on the web on how to use your fancy zoom with iweb and it works great! however my .png pics with transparent background always show as a white background on firefox (mac). they properly show as transparent on safari. i'm sure my pics are ok as i've double checked them and i'm thinking there might be something in the css created by iweb or maybe it's like this with fancy zoom? do you have any ideas? if so it would be much appreciated as i can't figure it out... :-(
thank you,
rick
i have followed your tutorial and it works great! however for some reason my .png pics with transparent background show as a white background in firefox (mac). on safari they properly show as transparent. i'm sure my pics are ok but i'm thinking there's something in the css that might be causing this or maybe something with fancy zoom? any ideas why? thank you very much...
rick
Couple of suggestions:
1) Just wondering if the animation can be turned off as it's dog slow on my work machine.
2) Also, how about a dark see-through bg over the whole page to bring it out more. Like they do on the Apple site: http://www.apple.com/uk/macosx/technology/
Thanks!
-
A very very beatiful script, really! Simple, fast, light! Congratulations!
i've been working on it and can only get it to work on small images.
When changing it to a High res image link, it redirects before loading an image. Help???
I've seen it done before so i know it works, that's what annoys me ¬.¬
Ideas anyone?
FancyZoom 1.1
10.5.8
#ShadowBox table, #ShadowBox tr, #ShadowBox td, #ZoomCapDiv table, #ZoomCapDiv tr, #ZoomCapDiv td {
border: 0;
padding: 0;
}
Can you take a look and let me know..
www.integratedmovement.net/teamim.html and click on the Andrew Wallen zoom, compare it to the others. On some pc browsers the zoom comes out distorted on the andrew face.
I'd appreciate any comments.
Thanks
radioguykvi@yahoo.com
I love the script, but I was wondering if there is a way to have the image zoom to a specific location on the page instead of centered. I found an example that I live on the homepage of the http://www.ncover.com website. I would really like this functionality so that it seamlessly integrates with the site I am designing. I'm wondering how they were able to place this in a static location. JS? CSS? Any help to do this and I will be purchasing for sure!
Cheers
I'm wondering if we can replace the image by some content (html file or a div with html content including image)
thanks !
I use FancyZoom and I like it, but I have some problems by using Firefox (3.5) and Iron Browser.
The shadow is awful, and I don't know why. In an other site in which I use it, I haven't go problems, but I can't find the error.
Can somebody help me?
Ty!
Thanks!
Check this page as example:
http://www.divulgare.com/photos/index.php?album=sukkot-jerusalem&image=sukkot-jerusalem-10.jpg
Users should click on "Adicionar Commentario" (add comment) so that a comment box appears on the site.
But it doesn't works since I've installed the zoom functionality....
\Please help - contact me at gabriel [in] divulgare.com
Thanks
Brett
just a quick note, weve installed and tested and all good, but have one issue, the script isnt passing back onMouseOver and onMouseOut events
how would we do this ? or could code be altered to do this as well ?
steven@hip-furniture.co.uk
code running on hip-furniture.co.uk/index_test.asp
cheers
x
Post a Comment