WP FancyZoom is a simple way to add the FancyZoom image overlay script to your blog. In short, FancyZoom is a nice, modern way of making popup images. You put a thumbnail image in your post and a link to the full-size image. If a user clicks on the thumbnail, the full-size image zooms in over the current window. When the user clicks on the zoomed picture, it goes away. Want to see it in action? Check out this post.
Current version: WP FancyZoom 1.0
Nifty features:
- The zoom effect is super sexy.
- No extra work needed when you write a post: any direct link to an image will automatically get the FancyZoom treatment.
- Any title=’…’ attribute in your link automatically turns into a caption.
- This plugin is a drop-in replacement for my previous Simple Popup Images plugin.
- That zoom effect? Still super sexy.
License
The plugin itself is licensed under the GPL. The underlying FancyZoom script, however, is not, as the FancyZoom page explains.
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.
Installing
- Grab the latest version
- Put the entire plugin folder in your wp-content/plugins/ folder
- Activate the plugin in your Wordpress admin panel
That’s it!
Using
Thanks to the FancyZoom script, there’s nothing else you need to do. Any link to an image is automatically zoomed, like this one. For example, <a href=”image.jpg” title=”An image”><img src=”image-thumbnail.jpg” /></a> would zoom the image and give it a caption reading “An image”. If you don’t want a link to an image zoomed, add rel=”nozoom” to your link.
If you’re replacing my old Simple Popup Images plugin with this one, you’ll need to check the “Maintain backwards compatibility with Simple Popup Images” box in the plugin’s options page.
Thanking
Cabel Maxfield Sasser is the author of FancyZoom. He did all of the heavy lifting. If you want to thank me for pluginizing it for WordPress, please mention on your blog that you’re using the plugin and link back here.
Changelog
1.0 (15 February 2007)
- Initial release.
86 Comments
The link at “Grab the latest version” doesn’t work (I think you’re missing a period in the file name…).
Thanks, Stephen! This is really cool!
You might want to point out that people have to check the backwards compatibility option in the WP FancyZoom options.
And if things don’t work, the first thing to try is to add a forward slash (”/”) to the path to the plugin in the options pane.
Awesome little plug-in. I’m using it on my FSBO home site and really loved how easily it worked.
Woow great i test it. I love it, thanks
It work smooth with Mozilla Firefox but with IE some not work some work.
That’d be a possible issue with FancyZoom itself, and isn’t anything I can address.
Thanks for this plugin… I’ve be searching for this a long time ago…
About the “Grab the latest version” link, here it is: http://granades.com/downloads/wp-fancyzoom.zip
He forgotten to add the . before the zip
How I can modify the current resolution of the image extended for 640×480? therefore the image extended with the current resolution presents some defects
Oh, now I see which link was broken. The one up top was fine, which confused me. The other link is fixed now.
Fco, that’s going to be a question for Cabel, the author of the script itself. You can contact him through his FancyZoom page.
Thanks for this great plugin. it works on my front page, but not when I open a single post. I use a modified Silver Light theme.
Any ideas?
I found the error. It didn’t work in ie either. The error was not found. I changed the relative path in header so it goest directly to the url of my webpage: Http://website.com/wp-content/plugins/wp-fancyzoom/adddomloadevent.js.
Maybe it has something to do with pretty-urls or something.
Can you change the header back and then give me the URLs of your blog and a page where it doesn’t work? I’d like to take a look at what’s happening.
I got the images up, but the closebutton and the other images was missing.
This was my solution:
Open up FancyZoomHTML.js
Add var zoomImagesURI = ‘http://yourdomain.com/wp-content/plugins/wp-fancyzoom/images-global/zoom/’;
// Location of the zoom and shadow images
Save and upload. This line was in FancyZoom.js but not in FancyZoomHTML.js.
Now it works in booth IE and firefox and the closebutton and so on is showed correctly. Maybe you can make this line point directly to the domain in some way, but i don’t know how to do that. Anyway, it may have to do with me using permalinks.
The plugin doesn’t work for me.
Take a look at my page.
http://limetouch.com/archives/farewell-my-friend/
The first picture does not zoom.
It looks like the Google Analytics package may be futzing with it. If you remove Google Analytics from the page, does it then work?
I am sorry but the Google Analytics tracks my site’s visits and it has never broken my image overlaying plugins before.
I understand what Google Analytics does, thanks, and it’s nice it doesn’t interfere with other plugins. I’d like to verify that it doesn’t interfere with *this* plugin. Could you disable it temporarily and see if the image zooming script then works?
Ok, I have since disabled my GA plugin and enabled fancyview. It is not working as you can see.
this plugin is NOT working for me at all
Looks like Darran’s is working. Mine isn’t [insert frowny face here], and I don’t know why. I was digging through comments looking for someone else with the same problem and I seem to have the same problem as Kay did with Simple Popup Images.
I tossed in your solution (thought I was on this page-oops) and the warning message went away but the zoom didn’t work. Now that I’ve returned it to standard, I’m getting the error message again and it still doesn’t work.
Do you mind taking a look at it? I put the offending page in the website spot above, and I’ve left the plugin active. (As you can see from the source code, I’m using javascript in several places, so maybe they’re fighting? I shut down everything else and changed the theme and had the same problem, though, so I don’t think that’s it.)
Warning message follows:
Warning: strpos() [function.strpos]: Empty delimiter. in /home/…/wp-fancyzoom.php on line 270
Matt,
I sent you a reply in email, just to let you know.
Thanks! It’s awesome! Cheers mate.
Hi, Great Plugin! Is there any way to modify the code to make it act as a mouse over popup instead of a click popup? If so, what do I have to change?
That’d be a question for Cabel himself. I didn’t write the Javascript code that does the popuppering, only some wrapper code to make it integrate into Wordpress blogs.
Works great! However, how would I get it to work on other pages (Comments, Archives, etc…)? Thank you.
That’s just great plugin man. I was looking a plugin like this for years
Thanks for good work.
Great plugin.
If I wanted to change the “title” area that pops up with the image, is that in a CSS file somewhere that I’m missing?
It’s fine how it is, but I’d like to get it to match our site design.
Is this plugin suppose to work with another plugin? I installed FancyZoom and when I add an image to my post, the href always equals “javascript:void(0)”. When I go into the code and tweak it to match what is posted here, the plugin works wonderfully. But I don’t want to mod the code manually for each photo.
Am I missing something?
Mike,
When you say “title area”, do you mean the caption at the bottom? The short answer is that what it looks like is controlled by the FancyZoom Javascript files, and would potentially require some rewriting of the script.
Clifford,
It’s supposed to work as-is, with no other plugin needed. There’s a bit of Javascript hackery going on to make all of your image links automatically work, and it sounds like something’s gone wrong with it. Can you email me a URL where it’s breaking?
Stephen,
I emailed you a link to the page. Hopefully they didn’t wind up in your spam bucket . . .
Thanks!
Clifford
For those following along at home, Clifford’s got the plugin working now.
It’s a great plugin but I have the problem that it only works on the starting page, but not in a single post. I’ve tried the solution from anders but it doesn’t work…
Can you tell me what I do wrong?
Thanks
Mario, I had that problem until last week. I was missing the opening backslash on the path to the plugin.
Instead of “/wp-content/plugins/wp-fancyzoom”, I had “wp-content/plugins/wp-fancyzoom”.
I have no idea why that would cause that problem, but once I inserted the backslash it started working. Haven’t had any trouble since.
Hi Matt, thanks for the answer. One question, in which file I can find this path?
It’s in the plugin’s options page.
If this solution works for you, could you let me know? I’ve been unable to determine why that should make a difference, but if it does, I’ll enforce it by default.
Wow, this solution works for me too! I can’t believe it. Just a simple backslash…
Stephen, thanks for the plugin! and of course Matt, thanks for the backslash-tip!
Just installed this on my WP blog and it works perfectly!
If you’re a frequent blogger, you know that sometimes images won’t fit in your blog full size, or you might want them to stay small for the post they’re in, so you must use a shrunken version of the image and link to the original’s source so the reader can view the full size version. I have been searching for an easy way to make an image enlarge or popup on mouseover without using javascript for about an hour and a half now and I was almost about to give up when I found this plugin. With this plugin, you don’t even need to change the source for the posts you made in the past, this plugin fixed the problem perfectly for any image linked to its original source. THANKS SO MUCH!
This is super cool! Great work and thanks
Glad y’all are enjoying the plugin.
Like Matt, I had to add the leading / to the location of the plugin to make it work. This is with Wordpress 2.5.1.
Would missing the preceeding / also cause my stats stuff to track it as
/url/wp-content/plugins/wp-fancyzoom/js-global/FancyZoom.js
I started seeing that in my logs (presumably because it’s a 404??) when I installed, never thought about it. Came here to check, and checked page2 of the blog, and it was broken.
Fixed that, will see if it stops showing up in logs now.
Hm, possibly. I’ll shortly make an update to the plugin that requires a preceding slash.
I really love this plugin. I noticed something on a friends blog that doesn’t seem to work quite right.
If I go into the comments of a blog, the images then open in a new window. The same goes for if the blog entry is in archive. Is there a snipet of code that needs to be entered somewhere to make this plugin work on those screens as well?
Thanks!
Matt
It shouldn’t. I’m not sure what’s going on there.
Just installed and I had to add the “/” to the front of the location of the plugin under settings. no biggy, but…
also, in some of my titles I have enough text to create two lines of text. This kinda bugs out the text bar below. It would be cool to have it work with more than one line of text.
Hi, thanks for the plugin.
It works nicely on the blog homepage.
But I have the same problem of Matt(and of everyone I think):
“If I go into the comments of a blog, the images then open in a new window. The same goes for if the blog entry is in archive”
Please, could anyone fix it?
Thanks!
To get images working on sub-branches like /photos or /stuffandthings:
I had to hard edit my site into the paths section of the wp-fancyzoom.php file in place of the relative links.
So for example:
echo “\n”;
For the images I replaced:
echo “\nvar zoomImagesBase = ‘”.
$fancyzoom_path.”‘;\n”;
with
echo “\nvar zoomImagesBase = ‘http://www.mauerpower.net/wp-content/plugins/wp-fancyzoom’;\n”;
I know it’s a hack but at the very least it’ll speed up that specific PHP file a tiny bit.
Now, Stephen, my question is how to I get fancyzoom to work on images that are loaded using AJAX calls. MEaning, image links that are loaded after the script does it’s initial runthrough of the site. Is there a way at all? I suppose this might be a question for the original author.
I’m talking specifically about Slickr gallery, as it loads in gallery pages using AJAX after the main page has loaded.
Thanks for all your hard work!
Whoops the comment box stripped some code.
For hard editing the js links change lines that use this type:
<script src=’{$fancyzoom_path}js-global/FancyZoom.js’
to this:
“<script src=’http://www.yoursite.net/wp-content/plugins/wp-fancyzoom/js-global/FancyZoom.js’
Aha. I’ll look at that in more detail and see if we can make it not so hacky.
As for getting it to work with AJAX-summoned pictures, that’s outside my scope.
The original fancyzoom script searches for img tags in the HTML, so AJAX-injected pictures likely won’t get that treatment. What you *could* do is alter the Slickr gallery scripts to add the fancyzoom javascript call to any images it displays.
it doesn’t work for me…
could you explain it better?
thanks
Thanks a lot for your fabulous plugin - works like magic.
Moore
Thx for your pretty plugin first.
I wonder how should I do to make it work on pics from other sites exp.flickr or picasa ….
hello there and thanks for this wonderful thing
i got a little problem. fancyzoom plugin seems to work only on the main page of my blog. when i lode another page it doesn’t work anymore.. why?
thanks
Fender
If you look higher in the comments, there’s someone who had the same problem and who found a fix. I’ll be incorporating the fix into the plugin shortly.
It’s a great plugin but… don’t work with the gallery mode ([gallery]) in Wordpress 2.5.1
The shortcode interferes with how Cabel’s javascript works in ways that are subtil, I’m afraid.
Neat little plugin, thanks!
I have thousands of images already and this makes life so simple.
Dear Stephen,
Thank you for the nice work! This is the first lightbox style image overlay script what work with my jQuery tabbed style.
thx again,
miles
Hi superb plugin, however if you check your website stats it is generating a lot of 404 errors and eating a lot of BW almost 10 times. Thoug it is working perfectly on the site. Please check this.
Hi,
Great plugin, super stable and ver efficiant !
So I am trying to set up my next website update using the great next gen gallery plug-in and Fançy Zoom. And while there is no real bug or conflict, I can not use theme both at the same time because they are overlapping.
When I click on a picture on the blog section, Fancy Zoom works fine. When I clic on an image from any Next Gen Gallery (NGG), both NGG and FancyZoom open the image in the middle of the screen.
Is there a quick and easy way to disable FancyZoom in this case?
Thank you.
Not really. You’d have to rewrite the plugin to only show up on some pages.
Great job with the plugin! Thanks for your hard work.
Just one quick question–how do I add the little magnifying glass to the bottom right of the thumbnail like Cabel has it on his page? I can’t seem to get that to happen with the plugin. Thanks!
mcd, I think that’s something additional he did via javascript. I don’t think it’s part of the code that I turned into a plugin.
Just in case you start getting flooded with pleas for help, when I upgraded to WordPress 2.6, the magical leading slash was removed from the box in the Settings page. Once I added it back (as noted on comment 33), it’s back to being awesome.
hi,
i love this plugin but i can’t get it to work.
i uploaded the plugin en activate it but when i put a image in a post it dont work.I did put forward slash (”/”) to the path to the plugin in the options panel.
can you help me please en tell me what i have to do to get it working on my site?!
i have wordpress 2.6
Really nice plugin
Installed on my blog :p
great stuff the WP-FancyZoom PlugIn and normal pix in post a zoomed very smoothly…But just a question: I’m using WP 2.6 and I would like to use fancyzoom with the [gallery] function of WP. Any idea how this could work? greetz lutz
I’m afraid not, Lutz. That’s one of those things I haven’t dug into very deeply.
Stephen, I cannot get the plugin to work. I added the */* slash to the path. No change. I used the code above,
It looks like this at the bottom of the home page (cartoon):
What am I doing wrong??
Hi! great work, thanx!
I got a bit of a prblem though… a) I dont realy know a lot about programming, b) I AM USING BLOGGER….
Is there a chance you are thinking of creating this plugin for those of us that use Blogger?? That would be amazing…
alex
I had the same problem as reported above, i.e. fancyzoom only working on the first page. Adding the trailing salsh in the plugin options solved it.
Thanks for posting this!
it’s not working in mimbo theme. but working in another theme.
I’m confuse of this..please help me.
thank you boss..
Sorry, Effendi, I don’t know enough about the themes to know what’s going wrong.
in the fzoom_get_script_dir_url function, the last line should have a “/”.
return str_replace($dir_to_site, ‘/’, $fzoom_script_dir);
Other than that, it’s a great plug-in.
Hello,
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
Could you update it to FancyZoom 1.1 please
it’s a gorgeous effect but I haven’t been able to get the plugin to work in WP2.6 and K2. I might try the original script - I have subscribed to the comments so hope to retry it pending an update. thx
I use the plugin with WP 2.6.1 and its working fine on my wurstakademie-blog
It also worked in 2.6. Maybe it’s because the backslash… See Comments nr. 33 -35…
I love this plugin. Thank you very much. I was really look for something that was easy, simple and did not require me to input any code.
wow great script I love it!
Thanks for sharing!
Joachim
i installed the plugin but it doesnt show up in my admin panel to activate it
i’m using version 2.6.2
it works form a direct link, but this one shows te image on a new page, without zoom and you heva te go back manually, wahts’s wrong ?
Is it possible to activate FancyZoom only on pages and not on posts? Or such otehr features?
this is a great plugin for artists! i’m working on my new site and having a bit of trouble. the plugin doesn’t look right in firefox, as you can see here: http://www.ifeellike.org/projects (click “The Color Purple”). It look great in Safari. I am no programmer and have no idea what to do? any help is great, thank you!
Awesome, I’ve been wanting FancyZoom on my blog for a while but I never thought to search for a ready-made plugin until just now. It works great! I did notice a problem however: I have my css set up to put a border around any images in a post unless I put in a class that turns off the border. The problem is that when I zoom the image, the close button (x) has a border on it. You could easily remove this easily with object-level css. I had the same problem with the nksnow plugin, and I fixed it manually before the author fixed it himself. I suppose I could do that with yours as well, but I bet I’m not the only one with image borders. You can see an example of the problem here: http://zeveisenberg.com/blog/?p=163
Hi Steph,
i want some images doesnt get the zoom effect, how you are telling in the description, i´va added rel=”nozoom”, but it doesnt work for me, look at my html, is that right or wrong? =)
can you help? thanks
28 Trackbacks
[...] Posted on March 21, 2008 Filed Under Random News It was easy to install in the first place, just two lines of code had to been added, but anyways, FancyZoom just got out as a wordpress plugin, thanks to Stephen Granade. You can download WP FancyZoom 1.0 (featuring FancyZoom 1.1) at Live Granades. [...]
[...] one of the easiest ways to make your blog a little bit easier to use and prettier on the eyes! All this plugin does is make any image link become a pop up on the [...]
[...] WP FancyZoom von Stephen Granade ist eine einfache Möglichkeit, dass FancyZoom Image Overlay Script im Blog zu nutzen. Nach dem Klicken auf ein Vorschaubild öffnet sich ein Popup mit einem interessanten Effekt, welches das Bild in der Orginalgröße beinhaltet. Ein weiterer Klick auf das Orginalbild schließt das Popup wieder. Bookmarks setzen: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können. [...]
[...] EDIT: Well it seems to work fairly well. It can be a bit slow to create the pop-up images though. I’ve decided to install it in all of the weblogs here so people can make use of it. If anyones curious the web page for it is at granades.com. [...]
[...] P.S.: vi piace il WP FancyZoom Plugin? [...]
[...] ダウンロードしたんですが、IE７で見ると、ページでエラーが出るようになったのです。 [...]
[...] the image to try out Cabel Maxfield Sasser’s FancyZoom thingie, pluginifized by Stephen Granade. A new Near Future Laboratory [...]
[...] ich noch ein Plugin installiert, das mal testweise das Thickbox Plugin ablöst, es nennt sich WP FancyZoom. Wie das ganze in Aktion ausschaut, könnt ihr bei Klick auf das folgende Bild [...]
[...] Lösungen für (zu) grosse Bilder mit einem tollen Zoom-Effekt löst: das WP-FancyZoom-Plugin. Den Effekt kannst du hier testen [...]
[...] First up was a concept site for the San Francisco Ferry company Blue & Gold Fleet. You can view it here. I used the clean and stylish Fancy Zoom, which for my money is a nice alternative to the more common lightbox method. I was happy to discover that there is also Word Press version of Fancy Zoom. [...]
[...] entsprechendes WordPress-Plugin habe ich auch noch [...]
[...] de Wordpress un plugins vous simplifie les manipulations a faire, il vous suffit de télécharger WP FancyZoom et d’activer le [...]
[...] mit dem die Miniaturbilder in den Blogposts sehr sexy vergrößern kann. Das Plugin nennt sich wp-fancyzoom und ist in einer Minute installiert. Damit alles funzt müssen die thumbnails im post selbst [...]
[...] wp fancyzoom. it makes the thumbnails of all the pictures on the site zoom out in a fancy new way, much like the [...]
[...] header.php und fügt folgenden Code ein. Benutzer eines WordPress-Blogs können auch ein Plugin nutzen (Danke [...]
[...] WP FancyZoom Wordpress Plugin このサイトにあるWP FancyZoom.zipを落としてきて解凍して、wordpressの wp-content/plugins の中に入れるだけ。 みたいに投稿を書いたら画像がsuper sexyに開きます。 titleに書いた内容は、下にでてきます。 FancyZoomを使いたくない時は、投稿の時に みたいに rel=”nozoom をつけると普通に画像が開きます。 こんな感じ Post a comment — Trackback URI RSS 2.0 feed for these comments This entry (permalink) was posted on 木曜日, 7 月 31, 2008, at 12:25 PM by admin. Filed in js, wordpress and tagged FancyZoom.js, js, wordpress. [...]
[...] auf Anschlag. WP FancyZoom antesten, eine mögliche Lösung um Bilder auf elegante Art [...]
[...] diese kleine Spielerei Namens FancyZoom einzubauen. Leider lief es bei mir mit dem Plugin WP-FancyZoom nicht, also musste ich erst einmal nach dem Fehler [...]
[...] automatische Methode: Benutzer eines WordPress-Blogs können auch dieses Plugin [...]
[...] WP FancyZoom Wordpress Plugin Live GranadesHowever, how would I get it to work on other pages (Comments, Archives, etc Instead of /wp-content/plugins/wp-fancyzoom , I had wp-content/plugins/wp-fancyzoom [...]
[...] WP FancyZoom » FancyZoom is extremly attractive and modern way of making popup images. [...]
[...] 是废掉我一天的罪魁祸首—WP FancyZoom Wordpress Plugin. 太瞎扯了, 这个插件基于FancyZoom脚本制作而成, [...]
[...] FacnyZoomのWPバージョンをダウンロードします。 [...]
[...] WP FancyZoom Wordpress Plugin Live GranadesFancyZoom is totally free for your non-commercial website. In a bit of an experiment: if Instead of /wp-content/plugins/wp-fancyzoom , I had wp-content/plugins/wp-fancyzoom [...]
[...] to use this. If you want to install it manually just follow the steps above. You can find it at Live Grenade blog [...]
[...] hab gerade ein Plugin gefunden das FancyZoom in Wordpress integriert. Also kann man sich das hndische einfgen der paar [...]
[...] Dies sieht in meinen Augen gut aus und funktioniert auch prima. Realisiert wurde dies durch das FancyZoom Wordpress-Plugin. Viel Spaß [...]
[...] WP FancyZoom Wordpress Plugin | Live GranadesBy Free WP Plugin - WP FancyZoom Wordpress Plugin Live Granades | http://www.TheWordpressPlugin.com on WP FancyZoom Wordpress Plugin Live GranadesFancyZoom is totally free for your non [...]