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

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

  1. Download the Fancy Zoom package here

  2. Extract the archive and open FancyZoom.js from the js-global folder. Search for line 44. It looks like this

    3. 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.

  3. Now upload the folder js-global and images-global into your theme folder (e.g. wp-content/themes/yourthemename)

  4. 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>

  5. Almost there! Now search for the <body> tag and replace it with

    <body onload=”setupZoom()”>


Trackback? If you liked this article, subscribe.