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 601 – 731 of 731Is it possible to use FancyZoom in an area (image map) ?
Thanks for the nice code.
Nathalie
Tested with Opera and Firefox - no problem
Internet Explorer - working very slowly ....
i love it so much and it looks so much nicer than any lightbox/slimbox thingy
thnks
Don
Loved this script since the first time I saw it!
I was even more impressed when I saw it work on my Nokia browser :)
However I needed to attach the behavior to image urls like getimage.aspx?imagecode=12345
for dynamically loaded images.
So I changed the prepZooms() function in FancyZoom.js and works beautifully.
Now I can just add a rel="dozoom" attribute to attach any image url.
Here is the changed function:
function prepZooms() {
if (! document.getElementsByTagName) {
return;
}
var links = document.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
if (links[i].getAttribute("href")) {
if (links[i].getAttribute("rel") == "dozoom") {
links[i].onclick = function(event) { return zoomClick(this, event); };
links[i].onmouseover = function() { zoomPreload(this); };
}
else {
if (links[i].getAttribute("href").search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)/gi) != -1) {
if (links[i].getAttribute("rel") != "nozoom") {
links[i].onclick = function(event) { return zoomClick(this, event); };
links[i].onmouseover = function() { zoomPreload(this); };
}
}
}
}
}
}
I hope this helps people with the same problem: attaching the zoom to non image urls or maybe you will include this in a future version.
Thank you for FancyZoom. I love it!
One question: Horizontal images display perfectly. But vertical images are distorted to a horizontal format. How can I make it so both horizontal and vertical are displayed properly? I noticed that on this site all images are horizontal.
Thanks again!
But i still have a question.
Could you tell me how to set this zoom up with an area tag.
That would be very great.
Imagine a picture with all area shape's, so you click on an area it zooms out so you can see a detail.
Thank you in advance and thanks a lot for the script anyway.
Edu
now... all my zoom images are scaled.
Really don't know why this is happening
can you check it here www.desafioexportar.com.ar/v2/anteriores.php
T.I.A.
However, I dont know if anyone else has experienced the same issue, but the zooming on IE (6, 7 & 8) is way smoother and slower then it is on Firefox or safari, where it's so quick you lose the magic of the effect somewhat. What could be the reason for this?
Currently trying to give it a go but having seemingly followed your instructions I can't get it to work! Instead of zooming the image it just loads it in another window! what am I doing wrong??!
Any help much appreciated thanks!
Gary
I'm trying to use this with youtube videos and I've setup each link to auto play but now I hear all the sounds from each file before I even clicked on the image.
And if I turn off auto play, and click on the image to view the video; I hit the play button to play the clip it closes back down.
how do I fix this?
I'm trying to use this with youtube videos and I've setup each link to auto play but now I hear all the sounds from each file before I even clicked on the image.
And if I turn off auto play, and click on the image to view the video; I hit the play button to play the clip it closes back down.
how do I fix this?
THX
Thank you very much for FancyZoom. I use it for the image gallery on my site and luv' it to death. Awesome job!
Building my site, I noticed something peculiar. Perhaps you have encountered this yourself or heard about it from your users.
When I view a webpage that hosts FanzyZoom, and do a Print Preview without having clicked a picture before, using setting "Shrink to fit", Print Preview shows and prints the page as expected.
When instead you first click an image to zoom it, and then do a Print Preview with setting "Shrink to fit", Print Preview shows the content of the page shrunk about 30%. The text has become significally smaller. I guess about 30%.
You can try that here, with your own webpage. Make a Print Preview without and with first clicking an image to zoom it.
A workaround is to reload/refresh the page after you have clicked an image to zoom.
Do you know what could cause this behaviour?
FF3+ and IE7 both show the same result.
Any suggestions welcome!
Septimus
I'm new to this jQuery stuff, but I'm trying to put scroll bars inside the content that is zooming because, theres a hugh list of attraction that are on the page. When ever I try, it works but the list just continues to go down the page.
How do I go about putting a scroll bar inside the zoom content?
Thanks in Advance
Help would be appreciated...
Is there an easy way to get rid of the drop shadow and closebox image?
Best regards
Michael
The images open with the dimension of the first image opened. :(
(a href='/Stamps/view_stamp_photo.php?file=62' title='No. 1075 Issued 7 Feb, 1979 Dogs' )
(ing src= '/Stamps/view_stamp_photo.php?file=62' alt="Dogs" height='55' width='60'class='image2' /) (/a)
There only way I can think of getting it to work, as your code stands, is to maintain a copy of the images outside of the database and insert a link to the external image into the database record. Thus the PHP/MYSQL will be able to insert a physical image link into the web page instead of the PHP one. As there are hundreds of images this alternative wouldn't be efficient so I am wondering if your code can be amended, easily, to attach its self to non jpg, gif, png, bmp, or tiff links such as mine?
I realize that the latest update to your blog was mid 2008 but I am hopeful that you still check from time to time.
P.S. I had to use () instead of tag brackets and ing instead of img in example link due to your comment checker refusing to allow tag brackets and img.
in any case, after pasting code in, it worked but created a new page for the zoomed in pic!
please help with someone not too familiar with html.
i'm using iweb and edited the code in dreamweaver.
the tweak program i had trouble with it didn't work.
this did but please help with where to place the code for an iweb page...
thanks
Thank you!
Not sure if this has been covered... How about an addition of a background fade? In contrast, I think it's much better to isolate the image.
Hope you can help me!
M
Is it possible to have previous/next buttons on the zoomed images so you can view a whole album?+
Thanks,
Dave
now i am trying to repair the damage done
sorry for my english
Stop dimensions being screwed up: FancyZoom.js : Lines 103 - 104:
// Only preload if we have to, i.e. the image isn't this image already
if (imgPreload.src != from.getAttribute("href")) {
Stop 1px white line on side of image: FancyZoom.js : Lines 721 - 722:
myWidth = myWidth - ( myWidth % 2 );
myHeight = myHeight - ( myHeight % 2 );
drummondj at sectionz dot com
Just downloaded the .zip, installed it, activated it and everything ran smooth as a good ass!
if yes how do i implement it?
anyone else experienceing this ?
only on firefox on windows
example of problem here http://hip-furniture.co.uk/prod_show.asp?prodID=5629 appears work fine on all other mixes of browsers and OS
steven at huan.co.uk
I'm a total neophite in web-design. I tried using the fancyzoom as instructed on iwebunlimited (he uses this) and, although I went step by step several times, all the zoom does is open up another page with a bigger picture. There are many other users that have had this same problem and posted notices but unfortunately the iwebunlimited host does not address the issue. Does anyone here have any tips? I would greatly appreciate it.
Thanks,
Alex
IMO - Almost all sites have several images, automatically attaching zoom to all images may not be a good idea.
It will be more useful if we can "explicitly" attach zoom to images that need zooming. Kind of reverse of rel="nozoom".
but open source or not?
When you click on a given image, the wrong enlargement comes up.
http://www.core-design-studio.de
This displays correctly:
[a href="image.png"][img src="image-thumb.png" /][/a]
This does not display correctly:
[a href="image.png"]
[img src="image-thumb.png" /]
[/a]
(Sorry, I had to substitute < & > for [ & ] in order to post this comment)
Does any know how to fix this?
Thanks!
Just got a site made that is using fancyzoom for images however having the same issue as some of the above people have mentioned. Sometimes the image instead of popping up just 'whizes' to the right and at other times the popped up image retains dimension of previous image and therefore looks distorted. It appears to work intermittently and wonderig if there is a fix to the issue. Please view http://ilovetunics.mybisi.com/product/purple-cotton-top-tunic-with-white-embroidery
Help Please
Just wondering is there a way to fix the pop up dimensions problem - as stated previously by other people gallery works intermittently as sometimes it refuses to pop up and other times in retains dimension of previous image - eg: http://ilovetunics.mybisi.com/product/blue-caftan-beach-embroidered...
Please help
I tried to write a email two times. But I didn't recieve a answer. So I try it once more again at this way :)
I would like to take fancyZoom for a typo3 project, but I have some problems with the gallery.
First of all, if I include fancyZoom I can not longer set normal images a zoomable because the fancy Gallery tries to open it and I get an empty box. Addionally is there a way for differnt positions not in a row order like TYPO3 typical fancyZoom order, without much programming? Finally is there a way to hide the comment field? I'm looking forward for your answer.. :)
All the best,
Daniel
I urgently need an easy to use gallery for a client with absolutely no knowledge on html, javascript, php, ajax, etc. whatsoever. I was looking around for some weeks now and couldn’t find anything really appropriate.
So again, thank’s a lot.
Thanks for the library, is very good!
I've had problems displaying images that I previously loaded with Spry. I am not a professional javascript and I have solved the problem with the following botched:
FancyZoom.js adding a function:
function setupZoomSpry(event)
{
if(event.currentTarget.getAttribute("setupZoomSpry")==1) return;
event.currentTarget.setAttribute("setupZoomSpry",1)
event.currentTarget.onclick = function (event) { return zoomClick(this, event); };
event.currentTarget.onmouseover = function () { zoomPreload(this); };
event.currentTarget.onmouseover();
}
And in the HTML code I add the following attribute:
<a href="{dsFamilia_desc::@image_path}/{dsFamilia::@image}" title="{dsFamilia::@name}" onmouseover="setupZoomSpry(event)">
So I managed to register the onClick event on the first time I move the mouse over.
Good luck to everyone!
$(window).one('click', function(e) { fzZoomOut(this, e); });
to the end of fzZoomDoneIn() function.
I think that should be added to the official package.
Cheers, Anton
Gracias =). Desde Chile!.
#ZoomCapDiv TD {
padding:0px;
}
the image does not change properly www.nitiladesigns.com
[0] http://www.gocomics.com/features/32/feature_items/546808?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+uclick%2Fcalvinandhobbes+%28Calvin+and+Hobbes+-+GoComics.com%29&utm_content=Netvibes
on my homepage it does not work right.
can someone please help.
when i click on a thumbnail it works fine... when i click on another one the thumbnail i clicked on before that image appears and then switches to the image that i clicked on.
Pleaseee help! www.nitiladesigns.com
How to make me not have to add REL = "nozoom" to all the pictures, which increase is not required, as they increase in a new window?
Thank you!
1. The close button is shown inside the image rectange, rather than lying half outside (IE7, IE8).
2. On IE8, sometimes the close button is not shown until user moves the mouse into or out of the image rectange.
var links = document.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
var links = document.getElementsByTagName("a"), l_lenght = links.length;
for (i = 0; i < l_length; i++) {
if you are interested at, we can contact and look for other improvements mybodya at gmail
Have a great day
A mix or Portrait and Landscape images don't work. Landscape ones get distorted because they are zoomed in Portrait mode.
I thin some has already reported it.
Easy and Fats to use.
Help please!!
Thanks Megan out.
Hi all my name is Megan, I'm new to web design and I am having a problem. I'm sure I'm going to sound like a fool but here I go. I can't make the closebox.png work, I also cannot make the caption back ground images work. any idea as what I'm doing worg? I tried it on firefox, chomes and ie. I also tried uploading it to my server and still didn't work. could anyone help me?
Thanks Megan out.
Here's the link to one of the pages, try and click one of the images and you'll see what I mean. How can I solve this problem?
http://portfolio.io.utwente.nl/student/bloemhofm/3Dontwerpen.html
Also, where is this image called from in the FancyZoomHTML code?
The ESC key is not working in Safari or Google Chrome. You should be able to make that work, easily.
if (imgPreload.src.indexOf(from.getAttribute("href").substr(("/" + from.getAttribute("href")).lastIndexOf("/"))) == -1) {
thanks.
please advise.
take care
Thank you very much in advance.
Bob
When a thumbnail is clicked a video should zoom in and start playing. Is this possible?
thanks in advance.
thanks!
De ahora en más lo utilizaré en todas mis webs ;)
I'm very impressed, good work Cabel!
This happens with current safari and firefox on Mac OS 10.5.8. I appreciate him hooking it up for free with non-commercial sites... but there is absolutely no way anyone should buy this product and pay good money for it, way too buggy.
Thank's
thx
(head) section at the top of your web page(s): '. does that mean I can find the code of the specific webpage that I'd like to have the fancy zoom and edit the code from there? but I can't find any code on that particular webpage.html using transmit. Or which page I should go to to edit the code? by the way, I publish my website through a ftp server.
thanks a lot!!!
You can change where the images appear instead of the center, more to the left?
I use the fanzyzoom in Wordpress with the infinite scroll plugin. The fancy zoom doesn't work with the loading images… do you know why?
Sam
Also is there an ability to toggle between a group of images?
Post a Comment