diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)


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 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.
Share This Story, Choose Your Platform!

Do NOT follow this link or you will be banned from the site!