Smooth Javascript Image Zooming with FancyZoom

Cabel Sasser has released a JavaScript library called “FancyZoom” to view full-size photos and images inline on your web pages. FancyZoom provides a smooth, clean, truly Mac-like zooming effect, and is a more compact alternative to other zooming effects you might be familiar with, like Lightbox. Once loaded, it automatically attach to jpg, gif, png, bmp, or tiff link in your […]

Cabel Sasser has released a JavaScript library called “FancyZoom” to view full-size photos and images inline on your web pages. FancyZoom provides a smooth, clean, truly Mac-like zooming effect, and is a more compact alternative to other zooming effects you might be familiar with, like Lightbox. Once loaded, it automatically attach to jpg, gif, png, bmp, or tiff link in your page.

How to use?

  1. Download FancyZoom package.
  2. 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>
  3. Add onload="setupZoom()" inside your page's existing <body> tag. For example:
    <body id="whatever" [...] onload="setupZoom()">
  4. You're done! The rest is automatic — links to images in your page will automatically zoom the images. For example:
    <a href="image.jpg"><img src="image-thumbnail.jpg" /></a> will zoom up image.jpg when clicked.