FancyZoom – Zoom Into Images Using JavaScript

FancyZoom is designed to view full-size photos and images inline without requiring a separate web page load providing a smooth, clean, truly Mac-like effect.

Why Use Fancy Zoom??

  • Focused on the smoothest, most polished zooming animation possible
  • Automatically scales images from any image link, with no HTML changes
  • Preloads full-size images in the background on link mouseover
  • No resource-heavy Javascript libraries — 100% coded from scratch to zoom
  • Draws a nice drop shadow under the full-size image to offset it from the page
  • Uses Safari 3’s “box-shadow” feature to draw the drop shadow natively, no images required
  • Requires only two new lines of code in your HTML
  • Tested and works with Safari, Firefox, IE7, and IE6, and Opera.

How To Add FancyZoom To You WebSitezoom ?

  • Download the FancyZoom package. Version 1.1 Size : 53 KB
  • Unzip the package and upload the two folders inside the package to the root of your webserver.
  • Add the following two lines of code to the <head> section at the top of your web page(s):<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
    <script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
  • Add onload="setupZoom()" inside your page’s existing <body> tag.

For example: <body [...] onload="setupZoom()">

  • The rest is automatic — links to images in your page will automatically zoom the images.

You can add a few more functions

  • To add a caption – Add a title tag in your href.
  • FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.
  • If you don’t want an image to zoom, add a rel="nozoom" tag to your href.

ScreenShot :


Click on the small magnifier on any image to see the magnified image.

Similar Post  Build Your Featured Content Slideshow Using S3Slider JQuery Plugin

FancyZoom is totally free for your non-commercial website and can be downloaded from here.

If you have a wordpress blog there’s also a WordPress plugin that you can download from here.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.