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  Drag and Drop CAPTCHA - 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.