32
My First Attempt at a Plugin - “Fancy Zoom”
While I have modified and edited several plugins made by other developers, I have never really had the need to make one for myself. Typically, if I want more functionality out of any of my sites, I just modify the theme files directly. But, there is a first time for everything, and ever since I launched WPelements.com I have been wanting to write a plugin of my own. So, today I sat down for a few minutes, read a little about developing plugins on the official WordPress Codex, and finished my first plugin called “Fancy Zoom” in about 10 minutes or so.
Fancy Zoom is actually the name of a wonderful little script developed over at Cabel’s Blog that once implemented automatically generates a “fancy” zoom effect for linked images. Adding and using this script is actually very easy to do on your own, which is why I chose it as the subject for my first plugin.
The Fancy Zoom WordPress plugin I created simply makes the process of manually adding these scripts and files to your theme a little easier. All you have to do is upload the Fancy Zoom plugin to your plugins directory and activate it. The final step involves replacing the <body> tag, typically located in your theme’s header file with:
<body id="fancyzoom" [...] onload="setupZoom()">
That’s it… Any image links you use on your site will now have the “fancy” zoom effect.
Again, this is my first attempt at a WordPress plugin, if you can even really call it a plugin at all. But, I have already moved on and am working on my second plugin which will add the featured content carousel found in my Massive News theme to any WordPress theme. This next plugin will also include a new and improved control panel for managing the carousel.
Download the “Fancy Zoom” WordPress Plugin HERE. If you want to see what the effect looks like, head over to Cabel.name or my own portfolio site at 32eighteen.com.
32 Responses to “My First Attempt at a Plugin - “Fancy Zoom””
Leave a Reply
February 27th, 2008 at 7:05 pm
Your still the man…!
February 27th, 2008 at 9:59 pm
Would it take much to integrate this with a gallery plugin?
February 28th, 2008 at 6:46 am
Not bad for your first plugin. Cant wait to see how the Featured Content Carousel plugin turns out.
February 28th, 2008 at 12:19 pm
One question, when you click on an image how do you make it bigger! As we are using it for allot of flyers when you click it, it doesnt zoom enough.
February 28th, 2008 at 12:28 pm
Jay… Can you provide an example of what you are talking about?
February 28th, 2008 at 5:08 pm
Erm my blog isnt active so i cant show you but a clear example is; I have a flyer for an event i post it up as a thumbnail and when you click it, it opens up but then it doesnt show you the original size i.e. its not big enough. Its like not big enough to read it properly, yet the original image is big and easily readable. Hope that makes sense bro! I just want to know if you can make the images any bigger when they expand as it seems your plugin cuts the size off to a certain extent?! Sorry if that dont make any sense lol…
March 2nd, 2008 at 12:10 pm
Awesome work! This is a slick plug-in and it’s very easy to install. Great job!
March 3rd, 2008 at 7:07 am
Sweet plug-in, is there a way to use it for some images but not others?
March 3rd, 2008 at 7:33 am
Landon… That would be a good question, and or feature request for the creator of the script. http://www.cabel.name/
March 4th, 2008 at 1:39 am
I found cable.name set up dead simple but not working. This plug in eases non-techie-want-fancy like me to enjoy the world of web 2.0.. Thanks so much.
March 5th, 2008 at 4:36 pm
Your the man Jason. So simple, so easy, so beautiful.
March 9th, 2008 at 1:52 pm
Nearly perfect!
When I click an image on my first blog page, everthing is ok. But when I do it on, as exemple, page 3 the image zoom but de close box image doesn’t appear. The Url is wrong. It’s the blog Url + page3 + plugin url.
How can I correct it?
March 10th, 2008 at 7:03 am
Jay… If you are using custom permalinks, you might have to edit the fancyzoom script within the plugin directory with the true source path to the images.
March 13th, 2008 at 8:11 pm
Jason, feel free to delete that last comment. A quick search kids and you can learn how to keep those sidebar posts from showing up in your main list of posts…
http://codex.wordpress.org/The_Loop#Exclude_Posts_From_Some_Category
March 13th, 2008 at 9:08 pm
Killer script, thanks alot!
I use permalinks, so the images were not showing up (same problem Jay had).
I took your suggestion Jason and figured out the problem and how to fix it.
Posting the steps here to make it easy…
Open:
wp-content/plugins/fancy-zoom/scripts/FancyZoom.js
Find line 44:
var zoomImagesURI = ‘wp-content/plugins/fancy-zoom/images/’; // Location of the zoom and shadow images
Change it to:
var zoomImagesURI = ‘http://www.your-site.com/wp-content/plugins/fancy-zoom/images/’; // Location of the zoom and shadow images
Notice that I simply added the http:// path to the image folder.
Thanks for an awesome script, by the way.
March 15th, 2008 at 3:10 pm
hey JAY i have the same issue, did you ever figure it out… i have custom permalinks…
but i luv the simplicity of this plugin!!
March 17th, 2008 at 11:15 am
Very cool plugin - nice job -
but I have the same problem as the first Jay (I wonder if they’re different Jays?) with tiny images after activation - I’ll leave my name linked to the post where the images are zooming tiny - any feedback would be appreciated.
If we figure it out, i’ll post again - thanks
March 19th, 2008 at 3:50 pm
hi jason
do you think this could be adapted to make a text link zoom so like a magnifying glass appears over the text if it is a link? think this needs more clarification
ok so the font is 12pt and it’s a link and when you mouseover it ‘grows’ to 24 pt or something?
March 21st, 2008 at 7:24 am
Neues Plugin "Fancy Zoom"
Auf dieser Seite bin ich auf ein neues Plugin gestossen, welches mein bisheriges Plugin LightBox vorerst mal ersetzt. Den alten Effekt fand ich auf Dauer einfach ein bisschen langweilig, ausserdem hatte ich öfter Probleme mit der Beschriftung.
…
April 13th, 2008 at 10:35 am
any ideas on how to make it work with the body already having a =custom.
I tried adding id=”fancy zoom” and my css goes haywire
May 19th, 2008 at 7:25 pm
Thanks again for this pug-in, love the proffessional look it gives my blog…very much appreciate your work
Cheers
May 20th, 2008 at 7:14 am
@Everyone… More to come in plugins very soon. Thanks for your comments.
May 26th, 2008 at 3:44 am
I am having trouble with it though. For one reason or the other when I click on the image instead of showing me the bigger one it jumps to the upper left hand corner and shows a really tiny image.
Any suggestions?
May 26th, 2008 at 5:36 pm
Thanks a ton! Do to a conflict, I couldn’t use the lightbox plugins. This is much much better! I followed Jarred instructions above and it resolved the broken images on inside pages.
Again, thanks!
Dean
May 28th, 2008 at 9:59 am
This can be a good alternative, beside than lightbox plugins!
I’ll try this fancy plugin later on
May 30th, 2008 at 10:59 am
Sorry, can I ask something?
Why the zoomed picture got jagged?
I mean, when I clicked the thumbnail, it should be zoomed to the bigger one (800 width). But the result is, the image become jagged and the height isn’t 800 pixel. Is there a maximum height? How to edit it?
June 6th, 2008 at 9:04 am
Thanks for a great plugin! I use custom permalinks too, and after using Jared’s fix it works almost perfectly!
One thing though: the border around my images doesn’t have a background colour, it seems that the website fails to show the white background images from the FZ images file. Any idea how to solve this?
Thanks!
June 14th, 2008 at 1:43 pm
please whatever you do dont look at this in IE its my first attempt at a theme and still lot’s of problems
but that’s how you learn 
anyone any idea why my fancy zoom zooms the pics in reverse up to the header, i have a new plugin its called fancy UNZOOM
thanks in advance if your able to help!
June 29th, 2008 at 8:40 pm
Hey Jarred, thanks for the info on how to edit the url to the shadow and close box of fancy zoom, i was having the same problem with the images not working on any other page but the first page… now it all works great…
PS–great plugin
July 22nd, 2008 at 10:05 pm
Wanted to add my thanks to the list.
Been trying for weeks to make Cabel’s script work but couldn’t. Added your plugin yesterday and used on my first post. Instant success! Works great and has allowed me to rethink the way I’ll use my images in future. Cheers!
July 31st, 2008 at 6:10 am
Hello! I’ve found this plugin to be a perfect companion to NextGen Gallery, as the zoom effect is quite elegant. I would try, on the other hand, to improve it by adding the option to have a caption below the zoomed image. It can be taken, of course, from the link’s title or, better yet, the originating thumbnail’s alt attribute.
I’ll try this myself (not that I’m very good with programming at all), and see if I can manage. If I do, I’ll post my findings here for everyone’s benefit.
Thanks for such a great plugin (and a great site… just now discovering it).
August 2nd, 2008 at 9:59 am
Awesome stuff dude. I was struggling to get Cabel’s scripts working, but your plugin has done wonders. Thanks again