Fink About It

Updated: Very fancy, indeed!

Love, Wordpress Hacks December 18, 2008 3,823 views

hack, plugin, tutorial

Ever tried that great fancyzoom thing? It gives clickalicious results like this:

Here is how you can set it up for your WordPress site:

Download the Fancy Zoom package here
Extract the archive and open FancyZoom.js from the js-global folder. Search for line 44. It looks like this

var zoomImagesURI = '/images-global/zoom/';

Now change this into

var zoomImagesURI = 'http://www.yourdomain.com/wp-content/themes/yourthemename/images-global/zoom/';

Save and close it.

Now upload the folder js-global and images-global into your theme folder (e.g. wp-content/themes/yourthemename)
Open your header.php and add the following in the <head> section:

<script src="<?php bloginfo('template_directory'); ?>/js-global/FancyZoom.js" type="text/javascript"></script> <script src="<?php bloginfo('template_directory'); ?>/js-global/FancyZoomHTML.js" type="text/javascript"></script>
Almost there! Now search for the <body> tag and replace it with

<body onload="setupZoom()">

Trackback? If you liked this article, subscribe for more updates.

31 people fink about “Updated: Very fancy, indeed!”

Matt Anderson says:
November 29, 2008 at 01:44
Thank you for this! I have been trying to figure this out for a long time. However, my image directory doesn’t seem to be right?? Where are they supposed to go? Everything works except for where there is an image, it just shows a linkage problem. Thanks!

[Reply]
Alex Reply:
December 18th, 2008 at 02:57
You’re right, Matt. I updated the instruction. Now everything should work out fine.

[Reply]
iXpress.me says:
December 22, 2008 at 12:46
Just installed it on the blogging platform Of-Cour.se! and it all works fine.

Thanks a lot for making it happen!

Cheerio!

[Reply]
Jonathan Ellse says:
January 31, 2009 at 03:37
Doesn’t seem to work for me. using /blog as the wordpress folder and the techjunkie theme

[Reply]
Fink Reply:
February 1st, 2009 at 12:28
@Jonathan: You need to put: onload=”setupZoom()” with a capital Z.

[Reply]
Mark Tanner says:
February 9, 2009 at 01:17
This is my first WP attempt… I can’t seem to get this to work even though I’ve used ‘FancyZoom’ on other static sites.

Any help would be great!

[Reply]
Fink Reply:
February 10th, 2009 at 01:19
@Mark: Your path in FancyZoom.js is wrong. Repeat Step 2 and set the right path. That will do the trick.

[Reply]
Jonathan Ellse says:
February 9, 2009 at 07:13
Thank you very much for your extremely swift response. I meant to thank you immediately but have only just rediscovered the link!

Have submitted the article to digg to increase visitors!

Thanks again,

Jonathan

[Reply]
Mark Tanner says:
February 10, 2009 at 04:37
Thanks so much, I would never have guessed that an image link would break this code.

It all works!

[Reply]
Ray Hollister says:
February 14, 2009 at 06:50
You are wonderful! I am moving my website over to a Wordpress managed site, and I terribly worried I would loose my beautiful fancyzoom.

[Reply]
Fink Reply:
February 14th, 2009 at 02:43
You’re both welcome. Looks all fine over there.

[Reply]
Mark Tanner says:
February 22, 2009 at 11:32
Hello again,

Sorry, I’ve had to rework my WP theme and I can’t seem to get this so work again, I’ve looked through it lots of times and cannot see the issue.

Many thanks for any help!

[Reply]
Fink Reply:
February 27th, 2009 at 04:25
I think your Lightbox Plugin is a conflict with the FancyZoom stuff. Also, your pics are set to target="_blank" which doesn’t help either.

[Reply]
Lyn says:
March 12, 2009 at 01:30
Hi! Great Fancyzoom effect <3 Is there a way to display the full size of an image rather than it being resized to fit the viewing area of the browser? :O Also, I tried it out on my blog (removed it now though), and the image seems to go under my flash header rather than on top of it, is there a workaround to that as well? Sorry for the bother ^^;

[Reply]
Fink Reply:
March 15th, 2009 at 05:39
@Lyn: For the flash problem , you can try to use z-index [x] in your css code.

You can always put it the full size of the picture by choosing full-size and then clicking insert into post. FancyZoom will work, as long as the graphic is linked to itself (Link URL = FIle URL)

[Reply]
Lyn says:
March 15, 2009 at 06:22
Hi! Thanks for taking the time to look into it, I appreciate it! The solution looks interesting, I’ll give this another go when I create my next blog <3

[Reply]
JJ says:
April 10, 2009 at 09:26

I have had a wordpress theme created and can’t seem to figure out how to make it work with the php that is in the header. I have made changes to the js in the folder and uploaded and made changes in the header but not sure if their in the right place.
could I send you a screen shot. cheers for you hardwork!

[Reply]
Fink Reply:
April 10th, 2009 at 11:13
You skipped Step 4.

[Reply]
JJ says:
April 10, 2009 at 11:53
still no joy, every time I click on the link it enlarges the page content in firefox

[Reply]
JJ says:
April 10, 2009 at 12:27
Might have to remove it

[Reply]
Fink Reply:
April 16th, 2009 at 12:08
Yeah, you should look for the Javascript that enlarges your font. Also, remove that <body class="xyz" ...> .

[Reply]
Drew McManus says:
April 26, 2009 at 02:24
Great plugin but I’m about ready to pull my hair out becasue none of my images will appear full size. I have about 100 images that are all 464w x 814w but fancyzoom will only show them to 311w x 546h size.

This is driving me CRAZY!!! the image link is set to the original file and I know that file is the correct, larger size but I can’t get it to work. Please help!!!

All I want is to be able to link to the full size image.

[Reply]
fox says:
July 14, 2009 at 04:28
thanks very much for this helpful tutorial

[Reply]
SkyBioSS says:
August 10, 2009 at 08:35
Thanks a lot for this article.
All is now working fine on my blog, thanks to you !!!
Regards.

[Reply]
Chuck says:
September 19, 2009 at 10:31
Does this:
go in the header.php and replace:<body>

?. Tried it once but lost my site bg.

[Reply]
Alex Fink Reply:
September 20th, 2009 at 02:20
If body is in the header.php then yes. Depending on the theme the body-tag might be in the index.php

[Reply]
Chuck Reply:
September 20th, 2009 at 03:21
@Alex Fink, Thanks. It worked.

[Reply]
Chuck Reply:
September 26th, 2009 at 05:17
@Chuck, FancyZoom works in FireFox and Safari, but not in IE8. Any thoughts? IE8 treats it like layered slideshow, not a single image zoom.
Thanks.
cliff1976 says:
January 6, 2010 at 02:57
Thanks for this. It was pretty easy to modify it as well, so that flickr-hosted images offer a link back to the corresponding flickr photo page automatically (in order to comply with flickr community guidelines). An example is at http://www.regensblog.com/2010/01/06/happy-epiphany/ if you want to see.

[Reply]
Alex Fink Reply:
January 6th, 2010 at 04:13
@cliff1976, looking good. I’d change that link color back to white however. Well done!

[Reply]
cliff1976 Reply:
January 6th, 2010 at 08:14
@Alex Fink, good idea, thanks.

This might be my work-around for (more easily) displaying pictures hosted on flickr via my blog. I am stuck in WordPress 2.7 because a flickr photo album plugin I use has ceased development. But the FancyZoom, enhanced to include a link back to flickr (as per their guidelines), could be my ticket into future versions of WordPress.

[Reply]