WP FancyZoom Wordpress Plugin
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.
Related posts
Comment by Rachel
The link at “Grab the latest version” doesn’t work (I think you’re missing a period in the file name…).
Posted on February 16, 2008 at 4:54 pm
Comment by Rachel
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.
Posted on February 16, 2008 at 5:17 pm
Comment by Andrew
Awesome little plug-in. I’m using it on my FSBO home site and really loved how easily it worked.
Posted on February 17, 2008 at 12:38 am
Comment by Sim Kamsan
Woow great i test it. I love it, thanks
Posted on February 18, 2008 at 3:19 am
Comment by Sim Kamsan
It work smooth with Mozilla Firefox but with IE some not work some work.
Posted on February 18, 2008 at 3:31 am
Comment by Stephen
That’d be a possible issue with FancyZoom itself, and isn’t anything I can address.
Posted on February 18, 2008 at 8:14 am
Comment by Fco. Jr
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
Posted on February 20, 2008 at 7:29 am
Comment by Fco. Jr
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
Posted on February 20, 2008 at 8:11 am
Comment by Stephen
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.
Posted on February 20, 2008 at 9:07 am
Comment by Anders
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?
Posted on February 20, 2008 at 3:04 pm
Comment by Anders
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.
Posted on February 20, 2008 at 3:24 pm
Comment by Stephen
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.
Posted on February 20, 2008 at 3:29 pm
Comment by Anders
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.
Posted on February 20, 2008 at 3:40 pm
Comment by darran
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.
Posted on February 28, 2008 at 9:45 pm
Comment by Stephen
It looks like the Google Analytics package may be futzing with it. If you remove Google Analytics from the page, does it then work?
Posted on March 3, 2008 at 11:12 am
Comment by Darran
I am sorry but the Google Analytics tracks my site’s visits and it has never broken my image overlaying plugins before.
Posted on March 4, 2008 at 5:03 pm
Comment by Stephen
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?
Posted on March 4, 2008 at 6:21 pm
Comment by darran
Ok, I have since disabled my GA plugin and enabled fancyview. It is not working as you can see.
Posted on March 5, 2008 at 5:46 am
Comment by martine
this plugin is NOT working for me at all
Posted on March 8, 2008 at 5:08 pm
Comment by Matt
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
Posted on March 8, 2008 at 7:12 pm
Comment by Stephen
Matt,
I sent you a reply in email, just to let you know.
Posted on March 10, 2008 at 1:54 pm
Comment by whitey
Thanks! It’s awesome! Cheers mate.
Posted on March 12, 2008 at 12:22 pm
Pingback by Fancyzoom Worpress plugin : Æstheticrew.com
[...] 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. [...]
Posted on March 21, 2008 at 12:08 am
Comment by Matt Z
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?
Posted on March 21, 2008 at 8:08 pm
Comment by Stephen
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.
Posted on March 22, 2008 at 8:45 am
Comment by Jason Hansen
Works great! However, how would I get it to work on other pages (Comments, Archives, etc…)? Thank you.
Posted on March 28, 2008 at 6:02 pm
Comment by Max
That’s just great plugin man. I was looking a plugin like this for years
Thanks for good work.
Posted on March 30, 2008 at 8:26 am
Comment by Mike
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.
Posted on April 8, 2008 at 7:31 pm
Comment by Clifford
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?
Posted on April 9, 2008 at 7:59 am
Comment by Stephen
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?
Posted on April 9, 2008 at 8:51 am
Comment by Clifford
Stephen,
I emailed you a link to the page. Hopefully they didn’t wind up in your spam bucket . . .
Thanks!
Clifford
Posted on April 9, 2008 at 11:03 am
Comment by Stephen
For those following along at home, Clifford’s got the plugin working now.
Posted on April 9, 2008 at 12:45 pm
Pingback by crn-web » Blog Archive » WP FancyZoom - WordPress Plugin Review
[...] 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 [...]
Posted on April 15, 2008 at 10:40 am
Comment by Mario
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
Posted on April 16, 2008 at 10:31 am
Comment by Matt Algren
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.
Posted on April 16, 2008 at 10:41 am
Comment by Mario
Hi Matt, thanks for the answer. One question, in which file I can find this path?
Posted on April 16, 2008 at 11:08 am
Comment by Stephen
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.
Posted on April 16, 2008 at 12:17 pm
Comment by Mario
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!
Posted on April 16, 2008 at 12:30 pm
Pingback by WP Plugin Archive » WP FancyZoom
[...] 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. [...]
Posted on April 21, 2008 at 4:48 am
Comment by Adam
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!
Posted on April 22, 2008 at 8:37 pm
Comment by Malinthe
This is super cool! Great work and thanks
Posted on April 23, 2008 at 5:04 am
Comment by Stephen
Glad y’all are enjoying the plugin.
Posted on April 23, 2008 at 1:02 pm
Comment by Nic Lindh
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.
Posted on April 26, 2008 at 11:21 pm
Comment by Mike
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.
Posted on April 30, 2008 at 4:17 pm
Comment by Stephen
Hm, possibly. I’ll shortly make an update to the plugin that requires a preceding slash.
Posted on May 1, 2008 at 10:05 am
Pingback by IT » wp-fancyzoom plugin
[...] 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. [...]
Posted on May 2, 2008 at 8:41 am
Pingback by Disabled’s Blog » Blog Archive » Blue Screen o’Death
[...] P.S.: vi piace il WP FancyZoom Plugin? [...]
Posted on May 4, 2008 at 2:29 am
Comment by Matt
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
Posted on May 5, 2008 at 11:26 pm
Comment by Stephen
It shouldn’t. I’m not sure what’s going on there.
Posted on May 6, 2008 at 8:09 am