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