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 201 – 400 of 731 Newer› Newest»However placing the two folders contained inside FancyZoom 1.1 which are images-global and js-global did the trick !
The image is opened in a window. (fallback)
Zooming works but I can't get the close box or any shadow boxes around the zoomed image to work. I'm a novice with web work and js.
I have the index.html file and images under a folder on my pc. But on my website (its with bell sympaticos webspace)there's only the root with html file and my images and the images-global and js-global folders. On both places, I have to leave out the / in the script tags in front of "js-global/FancyZoom.js" to get it to work.
But zoom works.
I realize Firefox 3 is still in beta, but FancyZoom runs much slower in it (FF3 Beta 4) than in FF2. I think it has to do with the new image anti-aliasing that was introduced along with full page zoom. As a result, the images look nicer while your script resizes them, but the animation is a lot rougher. My system isn't the slowest in the world (Athlon 3200+) so this will probably be happening to a lot more people.
Great if for nothing other than this photograph What a mullet!
www.stephanedouville.com/sd/
I had trouble with the shadow, closeboxes etc.
Not sure if your is same issue but here's what I did.
In FancyZoomHTML.js after this statement
var zoomImagesURI =
I put the full path "http://etc etc.. in front of '/images-global/zoom/"
And in my html I did the same for the js entries.
"script src="http://etc etc.../js-global/FancyZoom.js" type="text/javascript">"
Someone posted this too and it looks great with a border if you have a lot of white like yours.
add this
"inImage1.style.border = '10px solid white"
put in line 63 in FancyZoomHTML.js
I used "black" and it looks good.
Is there a way to fix this?
Which is a shame, because it works beautifully in Firefox and looks stunning.
Not sure if you can fix the depth, I know a lot of lightboxes simply hide all form inputs when it's open.
But one question - how do this - navigation next\prev by the left\right half of full image (like this effect http://www.digitalia.be/software/slimbox )?
With the best wishes, Beliyadm
A while ago, we were about to implement this FancyZoom in a client site but, luckily, someone remembered to test against IE7 and, unfortunately, the performance just wasn't acceptable for a production website.
The danger is that, of course, most developers use FireFox or Safari, forgetting that the vast majority of ordinary users, something like 90%, use IE. Obviously, we designers are supposed to test against all browsers but, in reality, we all get lazy from time to time and booting into Windows or using Parallels can be a drag. Frankly, this means that someone could accidently use FancyZoom, not realizing how badly it will perform for the majority of their visitors.
Hopefully, Cabel will get around to solving this issue - it must be possible because Apple's implementation of almost exactly the same thing, on their site, works just fine in IE7.
First, it looks pretty much fine to me in IE7 -- it's slower, but it works, and still zooms. I'm testing using IE7 on Vista. Can you send me an example page showing what you're seeing?
Second, I'm not exactly sure how I would "fix" IE being slower. I use the exact same zooming code across all the browsers, no changes. As you can imagine, it's pretty suspect to me that it's perfectly smooth in Firefox and Safari but slow in IE -- it's meaning it's an IE performance issue. I could try to work around it, like I'm guessing Apple does, but that would mean simply reducing the number of animation frames for IE only, making the animation very choppy. It doesn't seem like a great solution.
Maybe IE8 will fix it before I do? :)
I have even less idea of how you might fix it, I just presume, by Apple's example, that there is a more efficient way to achieve the same effect in IE7, without reducing the number of frames.
IE8 might be great but, again, normal people aren't as eager to upgrade their browsers as you or I would be. The number of old browsers out there, in active use, is really shocking.
Anyway, thanks for replying, good to see that you are still engaged, I'm sure that if you discover any handy tricks specific to IE7, you'll implement them.
Applying basic troubleshooting here.
If I use Firefox to view Cabel's site, his pics zoom fine. Switch to IE7 (on same pc of course) and zooming is very slow. I have both a fast and a slow pc and this behavior of zoom is same on both.
My website is very basic. No CSS.
My 8 pics zoom fast either in IE7 or Firefox.
Sorry if this is an obvious point but isn't it just that IE7 is slow with processing a significant bulk of CSS and/or css with js ? I seem to remember seeing tests that show this.
Can anyone else test their website omitting CSS temporarily and see what happens? I'm IT, not a developer - sorry if this is a dumb thing to say - just trying to apply basic troubleshooting first.
When I try the page in IE, i get the "Error on page" message in the statusbar. It doesn't seem to like the body tag for some reason. Please help!
But I'm sorry, the horrible genereated table markup stabbes me in the eye. I recon you could make som real improvements in filesize there.
I just have to fix that sometime.
Linux Firefox - image zoom very slow
Linux Epiphany - image zoom very slow
WinXP IE7 - image zoom very slow
WinXP Firefox - image zoom fast
WinXP Safari - image zoom fast
WinXP Opera - image zoom fast
What's the reason for this? I think this feature should work the same on every platform/browser?
~Bernd
I'll try to find a way to "normalize" the animation and skip frames on bad browsers, but it'll take a while.
I am new to Javascript and webdevelopment. But I think, that this is not only a browser problem. Firefox under Win-XP works fine and under Linux(Ubuntu) it doesn't?
I also tested the new Firefox 3 Beta under Linux and the image zoom is also very slow :-(
I looked at a lot of Javascript functionality in the last time and there are a lot of implementation which works fine on all tested platforms/browsers.
I hope you understand my criticism right. I don't want to flame you.
I like your work, but It would be a great enhancement if it's work the same way on every platform/browser
~ Bernd
Any variations on how it actually behaves is 100% up to the browser itself, and literally beyond my control!
Again, I can drop frames maybe on slower browsers, so at least the physical time (one second, etc.) would be the same. It just might stop zooming entirely on bad browsers... the zooming effect pushes web browsers a bit beyond what they were really designed to do. A good browser like Safari will handle it fine.
However, I did successfully integrate Shadowbox into my test blog and it works much nicer. Lots more options, keyboard shortcuts, multiple file types, and works cross browser. Although it may be slightly 'heavier' code, it works pretty much out of the box. That's what i'm looking for. Good job though, I'll be monitoring for updates to FancyZoom
Great code though, and looks lovely in Firefox. Thanks!
Kind of ironic as Cabel and the Panic gang use it on the Transmit page. (OK ironic in a purely geek way).
How to make it work?
- macht sich auf unseren Feuerwehrseiten riesig toll!
Thanks a lot for this magic script!!!
I did come across a technical issue with FancyZoom though. With many images on a page, the mouseover trigger for the preload, causes so many simultaneous image load connections, that by the time the user selects the image they want to zoom, the script times out loading it. It just displays a tiny white box, with close icon, but no image. This was easily corrected by changing mouseover to mousedown on the preload line.
Thanks again!
Where I ahve to modify scripts?
Thank you
But. I'm using it for a school project: My test site
(very early embryo)
and as you can see, the zooming is quite .. laggy with Firefox. I dunno why; you sample pictures have lesser file size than mine, it won't work as intended anyway.
Some tip?
Thanks in ahead.
maybe I'm being dumb but I'm new to script of any kind,
I'm using iWeb '08, where can you edit the head and body tags because at the moment I'm just using the built it html snippets, is it possible to do it with these?
if anyone can help it would be brilliant,
the page I'm hopefully gonna use this on is on the models page of this website,
http://www.harryatkins3ddesign.com/general_models.html,
Thanks,
Harry
all the thumbnails are accurately sized. But the zoomed images adopt the aspect ratio of the first image on the page.
http://digitarald.de/playground/remooz.html
Great work! I was wondering if there is a way to zoom the image onMouseOver instead of onClick ... do you know how to achieve that?
neat effect, but I found it after encountering a bug in fancybox. Made a test page. Somehow all these zoom effects don't like flash elements. If you manage to fix this overlaying problem (flash stays in front), I'll buy a license ;)
http://home.edo.uni-dortmund.de/~theql107/ocean8/test.html
Doesn't happen on the Mac btw., although it really messes up the Flash in Firefox, Safari 3 is just fine.
in IE7 the shadow is not visible
In FF, the Image is not loading , but the shadow is visible
hope you will fix that bug
Chreeers
yoosuf
I've tried calling a simple getURL with the .jpg as the link.
If anyone has any suggestions it would be appreciated.
Jerad Hill
http://www.runarweb.com/drammen.html
I'm having some trouble getting it to work and would be very grateful for some help.
I followed the install instructions but when I click a thumbnail image the loader appears but doesn't load the full image.
I'd really appreciate some help if anyone has a spare moment? My site is at http://www.jonlamb.com
Thanks for helping, Jon
could someone please give some help on how to get fancyzoom to work, in iWeb??
I'm using iLife 08 and i want this effect on my gallery pages here: www.harryatkins3ddesign.com
any help would be great thanks,
Or maybe it's just me who's too stupid to work this out, but I'm so not a coder and yet would love to be able to implement FancyZoom on some WP blogs...! :(
Thanks in advance!
Thanks for the great work. You'll be getting $39 soon.
(Between FancyZoom and Coda you've really raked me over the coals... ;-) )
Kyle
nice job!
does anybody had problems with reflection.js?
there might be some var that crash!
and i can't find it
http://caseyagollan.com
Thanks!
Great work on this. I'll be buying a licence shortly.
Firstly, sorry for my english :)
Is it possible to get a link without an image?
Example:
NOW
//imgsrc=test_thumb.jpg//
I`M SEARCHING
testpic
Thanks for help.
Mike
Godspeed!
Any ideas on that?
Norm
// In MSIE, we need to put the close box inside the image.
// It's 2008 and I'm having to do a browser detect? Sigh.
if (browserIsIE) {
inClosebox.style.right = '-1px';
inClosebox.style.top = '0px';
} else {
inClosebox.style.right = '-15px';
inClosebox.style.top = '-15px';
}
I'm contemplating to use FZ. But a weird thing happens on my page. http://www.selecxyz.eu/html/regio/7Apulie/03APMA/03APMA.html
In IE6 and IE7 two weird little lines come out of nowhere in my header. Not so in FF. It has something to do with the onload command in the body. Is there a solution? Kind regards, wouter reefman
I'm contemplating to use FZ in my site.
But something strange happens. In IE little stripes appear in
the header. It is trickered by the onload command.
http://www.selecxyz.eu/html/regio/7Apulie/03APMA/03APMA.html
Do you have a solution?
kind regards,
wouter reefman
Might be handy to have a couple of tools to run though a directory of images to create thumbs and a mockup image gallery, where you could use some of that layout code in a web page or presentation; would save some time.
What do you use to generate your thumbnails? I know there is ImageMagick and other utilities available. I have a Mac, of course.
Thanks again!
I too would like to use Fancyzoom with a map area. Titanium Power said he has a mod and would post it but never did.
Could someone help here ?
Thanks in advance.
http://www.golike.com/burklund/collections/
If you click the first image, it looks right. But then try the others and they're all shrunk to the first image's proportions. Reload the page, only this time click another image first. It looks good but then the rest you click conform to that image's proportions. Is this what everyone else is seeing?
Question: My theme is Widget based, using, wordpress 2.5. I want this plugin for the posts not the pages so where should i place the code.
Header.php or somewhere else.
Plz. Help
(this site: http://www.leonieadam.at/index.php?page=beisarahwiener )
in firefox, safari it looks great
I'm using fancyzoom on my blog wordpress, the zoom work perfectly, but I have a problem of compatibility with my rating bars: (http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/ ), do you known how to fix it please? Thank you
Since the transparent gradient only works in the four corners, we need to make sure that the gradient works in the middle areas, between the four corners.
That's top middle, left middle, right middle, and bottom middle.
These correspond to the following graphics:
zoom-shadow2.png
zoom-shadow4.png
zoom-shadow5.png
zoom-shadow7.png
1. Edit the table generated by FancyZoomHTML.js so that there's an id attribute for the top, bottom, left, and right middle TDs.
var inCol2 = document.createElement("td");
inCol2.setAttribute('background', zoomImagesURI+'zoom-shadow2.png');
inCol2.setAttribute('id', 'shadow2');
...
var inCol4 = document.createElement("td");
inCol4.setAttribute('background', zoomImagesURI+'zoom-shadow4.png');
inCol4.setAttribute('id', 'shadow4');
...
var inCol6 = document.createElement("td");
inCol6.setAttribute('background', zoomImagesURI+'zoom-shadow5.png');
inCol6.setAttribute('id', 'shadow5');
...
var inCol8 = document.createElement("td");
inCol8.setAttribute('background', zoomImagesURI+'zoom-shadow7.png');
inCol8.setAttribute('id', 'shadow7');
2. Add the following styles to your stylesheet
#shadow2 {
background: url('/images/zoom/zoom-shadow2.png') repeat-x; }
#shadow4 {
background: url('/images/zoom/zoom-shadow4.png') repeat-y; }
#shadow5 {
background: url('/images/zoom/zoom-shadow5.png') repeat-y; }
#shadow7 {
background: url('/images/zoom/zoom-shadow7.png') repeat-x; }
Remember... if your images are located in a different spot, you'll need to update the css accordingly.
3. If you see a 1px offset on the top or left, you can fix this using CSS:
#ZoomImage {
margin-left: -1px;
margin-top: -1px; }
...
That should do the trick!
Greetings from Vancouver ... the Canadian one!! I've just discovered your excellent work and thoroughly tested it out into an ASP.Net environment. I noticed that some others have wondered if it works with ASP.Net. It does! To help them and others I wrote a long blog entry about it here.
Note: I'll buy a commercial license when my website goes live to the world.
Great work!
Robert W.
Puns intended.
But now that the FancyZoom is zooming instead of shrinking, it's creating havoc with flash content on the page. On IE7, it hides the image behind the flash content. On Firefox for Mac, it causes the flash content to disappear even after the image has been closed. Yikes! I can't use this on a commercial site with these problems. :(
I love the functionality; just took it for a spin with my Rockie Mountains Maps project to replace the click-maps I've been using, but was surprised to see that the zoomed image is not shown full size.
I'm sure you did this on purpose ... good design, actually ... but it should be a configurable option, no?
I will write a article about your script on ajax-frameworks.de!
Best Regards,
Sebastian
i'm new to javascripting,
can someone please give a step by step tutorial on how to get this to work on iWeb '08??
the website i want to put fancy zoom on is here :
[ www.harryatkins3ddesign.com ]
on my pages i would like people to be able to zoom in on the pictures for a better look.
thanks in advance to anyone who can help.
quick question. is there a reason i would not be seeing the zoom icon on each image? i noticed there was no corresponding image in the image folder. i tried downloading a 2nd time with the same probs.
META HTTP-EQUIV="imagetoolbar" CONTENT="no"
i am having one problem though, the popup image is being partially covered by a flash slideshow that is embedded a few lines above the fancyzoom image.
is there anyway to make sure this popup covers everything below it? namely a flash movie.
thanks in advance, and kudos on the script.
.m
You can see it at this page -- http://tinyurl.com/5sp59s -- and on these screen caps -- http://tinyurl.com/6y9h9q , http://tinyurl.com/65n65n.
any idea how to change that?
And better than lihtbox
On this webpage (http://alphaauthority.com/node/52), I'm trying to scale up an image when a user clicks on it but FancyZoom scales the image down instead. In Firefox 2.x, the shadows around the image also don't render properly in the right place.
It seems the script is trying to fit the entire image into the browser window. Is there a way to force FancyZoom to zoom to 100% even if the large image may be cropped by the browser window?
Many thanks.
Love the zoom effect, but as a few other people inquired about - I need to be able to zoom to actual size of the file to use it on my site.
Is there any way to change the code to not adjust to browser size and just go to full size?
I'd be happy to pay the license fee , but need to be able to zoom to full size!
thanks
--John R
http://vikjavev.no/highslide/
Awesome script! Holding the shift key for slowmo 'osx style' is a particular nice touch! :)
May I make a small suggestion? Internet explorer does not support transperancy in .png files, but transperant .gif files work withour a problem. Maybe it is an idea to use gif's for the borders, cause they look kind of crappy now (on internet explorer that is) I don't use it myself, but I think there are still a lot of people who do.
Just a suggestion. Awesome job. Thank you.
I'm encountering a strange problem with FancyZoom 1.1... in WebKit browsers, everything looks almost perfect, but in Gecko browsers, I'm seeing white rectangles along the borders of the image and its associated box.
For an example on my website, try this blog entry that has an image to try things with.
I think the problem is probably caused by a conflict between the CSS styles from my website design, combined with FancyZoom's generated CSS. But for the life of me I can't figure out the problem. Any hints?
(Although I'm sure you probably have better things to do, please feel free to e-mail me — link is on the right sidebar of my website, under "Contact the Webmaster" — if there's any more information I can give you. I'll keep an eye on these comments, too.)
I've tried to make it work on blogger for hours but it still doesn't work. I've modified the javascripts files by indicate the server's adress where the files are hosted. The only thing it does is display a never-ending spin. How the scripts can be corrected to load the images ?
If we do a style like:
#ShadowBox {margin-left:1px; margin-top:1px;}
It fixes the offset but it then is no good in other browsers.
Other then that absolutely fantastic little bit of code - so easy to implement.
The problem line is in the zoomPreload function, the change is as follows (any chance this could be merged in before I purchase for laurelandhardyarchive.com):
old code:
//if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1) {
new code:
if (imgPreload.src.indexOf(from.getAttribute("href")) == -1) {
Otherwise a great script... Thanks.
Also, it would be good to have a way to manually set the size that the image zooms from.
on line 115 the image tag needs to have a closer ">".
Great script, but even the use rel="zoom:800,487,screen-1" in the href section and id="screen-1" in the img section, the image size scales oddly!
please Cabel, be the great name you are... supply a fix!
Thanks
at the moment there's an issue on this site's examples (with Firefox 2.0.0.14 and Mac OS X 10.4.8): Clicking the thumbs doesn't show more than a grey icon-like rectangle, the closing button, and the caption (if one). However, I could convince the script to start working by pressing shift when clicking.
Safari 2 works well, so does Opera 9.26.
Nevertheless, thanks for this sweet script! :)
but i you have to use it on image of diffence size i dont work. if have panorama image as the first image alle the rest of the images get wrong sizes.
see: www.hostbox.dk/test
it there any think i am doing wrong.
On line 85 change document.getElementsByTagName('a') to document.getElementsByTagName('area').
Around line 186 in the zoomIn() function...beginning with the conditional "if (from.childNodes[0].width)" comment out the entire conditional except these three lines:
startW = 50;
startH = 12;
startPos = findElementPos(from);
And from there, it should work just fine.
Great work Cabel!
Yikes!
For comparison, I also checked the lighbox2 product page with styles off and saw none of these issues, so evidently they've addressed the problem.
I think this needs to be fixed before I'd be willing to part with cash, because it's an accessibility horror and kinda burps-up my fairly standards-compliant site.
I also couldn't help noticing that the Panic site is still built with tables. C'mon guys, lead from the front, yeah?
i'm having alot of truble loading the script without destroying my mootools effect. i'm using wordpress and the site looks like this :http://k-knudsen.dk/blogg/2008/07/08/paris-dag-3/
in the top that says "navigation" it's disabled everytime i add the body onload tag?
i have searched the net for hours now and follow "mike's" fix. but no luck :(
any idear what this could be ?
Thanks
Kenneth
Denmark
If it's being used on a corporate site with a lot of images $39 is a pretty small price to pay. And those who do pay will make up for all of the weasels who will no doubt pirate his work.
Any advice?
Thanks,
T
thanks for your great work
For Mootools users, if you experiment problems with FancyZoom and the Mootool Tips plugin just follow this few thing to fix :
in FancyZoom.js
line 700 : rename the function getSize() to getSizeFancy()
line 159 : rename the call to this function from getSize() to getSizeFancy()
Here you go, no conflict anymore :)
Otherwise, great app!
thanks
And where do you pay the $39?
I have the code as:
(wouldn't let me put in the first bracket but I do have it in there)
body onload="setupZoom()">
div id="container">
....
I am doing this using the preview in Dreamweaver but I tried a basic page and can get it to work only without the icons in the corners of the pictures appearing. Don't know if that helps identify the possible problem?
Am i missing something obvious?
Please help!
Thank you!
jQuery.com offers the same thing without licensing fees...same naming as well.
BUGREPORT (and fix): There is a small display bug under Firefox 3.x, when the page is served as rather application/xhtml+xml than text/html: the two border of title tag when zooming are a bit too far from the legend, as on [0]. This is fixed by giving a specific CSS style to the table in div#ZoomCapDiv, namely the border-collapse property, and the padding of the left and right elements in function FancyZoomHTML.js:insertZoomHTML().
This is done in by placing the following excerpts at the relevant location in said function (i.e. after the creation of each tag variable):
inCapTable.setAttribute('style', 'border-collapse: collapse;');
inCapCol1.setAttribute('style', 'padding: 0');
inCapCol3.setAttribute('style', 'padding: 0');
ANOTHER: (which may be the one resulting in the dimension errors reported earlier), in function FancyZoom.js:zoomPreload(), the first condition:
if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1) {
assumes that from.getAttribute("href") contains at least one '/'. If it doesn't, from.getAttribute("href").lastIndexOf("/")) returns -1 which, when applied as an argument to substr() extracts the last character of the filename instead of the basename of the file. This can be fixed using a REGEX instead of the substr:
if (imgPreload.src.indexOf(from.getAttribute("href").replace(/^.*[\/\\]/g, '')) == -1)
(Both fixes work in Firefox 3.x)
[0] http://img213.imageshack.us/my.php?image=buglegendfancyzoomjk4.jpg
Any ideas how to use it with a image map?
Thanks, DS
Trying to use the script here:
http://www.skylinetigers.com/new/photos.html
http://www.wpelements.com/2008/02/27/my-first-attempt-at-a-plugin-fancy-zoom/
You just need to open the FancyZoom.js file and change the location of the images folder on line 44.
I spotted and fixed two minor bugs, which may have been causing some of the glitches mentionned earlier. The following has been observed and fixed for Firefox 3.x and Epiphany 2.22.9 (Gecko 1.9) only, but may work as expected elsewhere.
First, the preload function is not properly triggered when the link is pointing to a relative URL. This is due to how the src of imgPreload is checked with the href attribute in FancyZoom.js:zoomPreload():
if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1) {
The indexOf() function returns -1 if pattern '/' is not found in the href attribute, which is obviously the case when it's a relative link to the same directory. Giving -1 as an argument to function substr() returns the first letter from the end of the href attribute which, of course can, never match imgPreload.src.
I fixed this by using a REGEX to extract the basename of the href attribute instead:
if (imgPreload.src.indexOf(from.getAttribute("href").replace(/^.*[\/\\]/g, '')) == -1) {
This seems to fix the bad dimensions symptoms described in earlier comments.
Second, there is a small HTML display bug in the caption label (#ZoomCapDiv). When the page is served with type text/html, everything's alright, but when it is served as application/xhtml+xml (that is real XHTML), there is a small space between the rounded borders around the caption and the caption itself. This is ugly. This can be fixed by adding a bit of CSS formatting when building the table. The following has to be put in FancyZoomHTML.js:insertZoomHTML() in the part that starts with comment "// CAPTION". This is three separate lines of code adding the proper style attribute to each of the elements that need fixing (easily identified by their javascript name).
inCapTable.setAttribute('style', 'border-collapse: collapse;');
inCapCol1.setAttribute('style', 'padding: 0');
inCapCol3.setAttribute('style', 'padding: 0');
Hope that helps. And thanks again for that! (:
Many thanks in advance for answering :-)
param name="wmode" value="opaque"
http://www.bigroom.co.uk/blog/showing-dhtml-content-on-top-of-flash-content
www.bigblue-usvi.com/atest/55zoom.html
Doesn't seem to find the larger photo.
Thanks
Muchas gracias
More troubling, the blowup flattened some images, not preserving proportions.
Just making a good product gallery for my softwares !
Excellent utility! Just the effect I wanted instead of opening a separate window [with the attend blockage by pop-up blockers] or using overlays like Lightbox [I don't like the dark full-page background effect nor the lack of a "wait" symbol/image].
Once I changed the image path in FancyZoom.js from "/images-global/zoom/" to "FancyZoom 1.1/images-global/zoom/" [the default path created when I unzipped "FancyZoom 1.1.zip"], the borders and wait symbol rendered correctly.
The utility works perfectly in Firefox 2.0.0.16, Opera 9.50, and Safari 3.1.1, all on Windows XP SP3.
The "close" button at the upper lefthand corner on zoomed images seems awkward for those coming from a non-Mac environment.
I read with interest the discussion regarding payment for commercial sites, etc., and the potential problems with monitoring licenses. Might I suggest you make your great utility "donation-ware" and set up a PayPal link [along with suggested amounts] on the page? The resultant individual donations may be small but even those with non-commercial sites will likely donate in appreciation. Just a thought.
thanks
great work,
but... I just write on a personal blog, and I know very very little programming. Couldnt you create a widget, so we can just click it and add it to our Blogger blogs??
You lost me at installation steps 2, and 4... no idea what you mean...
widget?
alex
great work,
but... I just write on a personal blog, and I know very very little programming. Couldnt you create a widget, so we can just click it and add it to our Blogger blogs??
You lost me at installation steps 2, and 4... no idea what you mean...
widget?
alex
Have you encountered this?
Thanks for the awesome feature!
help, please..
I am a drupal user and would like to use it on my drupal 6.x site, why not considering making a module for us drupal people!!
Would be very nice having it instead of the LightBox 2 project module from its web "stellapower.net"
Thank you so much,
drupal user.
Best regards from Poland :-),
http://www.hotui.com
Any other ideas to make this look correct?
var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images
By the way, I made closebox.png blank transparent because the small cross at the upper lefthand corner on zoomed images does not suit me :-). Now, all is perfect: http://www.glowacki.art.pl/
Best regards,
Pretty good script i like it but i can't change the zoom size, my image is bigger than the image displayed in the box.
How can I change the size of the box or the size of the zoom?
I've tried to modify many things but I din't get it.
thank you
someby please make a widget for blogger...
I havent got the slightest idea how to install it on my blogger blog...
somebody should just create an automated widget installation tool
alex
var minBorder = 90; // Amount of padding between large, scaled down images, and the window edges
Then if I load click on another thumbnail, it loads the previous photo I clicked on. Do I need to reduce the file size of my jpg's (they are 640x480, 72dpi)?
Any ideas how to make it work more efficiently?
Whenever I come across a site where this (screenshot) happens, the javascript source always shows Fancyzoom installed. The problem is in FF3/Leopard with many extensions. I'll have to go through them all to find the conflict - but somebody who already has found the solution might save me the trouble. Thanks.
I'm also having a lag issue with large images.
inClosebox.style.left = '-15px';
inClosebox.style.top = '-15px';
Thanks a bunch.
var minBorder = 90; // Amount of padding between large, scaled down images, and the window edges
in FancyZoom.js file.
So change 90 for another value - for example put there 0.
Best regards
www.glowacki.art.pl,
works perfect.
but just a question:
if i load a html-file in a DIV (AJAX)
and there inside is a gallery whit fancyzoom.
how i setup fancy-zoom in this case?
if i load the inside html-file whit the gallery alone, it works.
but inside the main-html in the DIV-container not!
thanks for any tips
Really a great effect.
I have a problem with the themes WP premium on my blog http://blog.atelier76.ch.
fancyzoom once activated, the tab on the right disprait, do you have a solution?
If I find I am dedicated to doing.
by
nico
Post a Comment