Submit your widget
HomeLightbox & Dialog & OverlayFancy Zoom with jquery or Mootools

Fancy Zoom with jquery or Mootools

Created 14 years ago   Views 17895   downloads 4735    Author orderedlist
Fancy Zoom with jquery or Mootools
View DemoDownload
131
Share |

FIrst off, you can visit the demo to see the effect in action. the fancyZoom effect is added in a much more jQuery-like way. 

$(document).ready(function() {
    $('a.zoom').fancyZoom();
});

This will add the Zoom Effect to any a tag classed with zoom, and will show content relating to the id referenced in the href of the a tag.

Additions, etc.

I’ve added in a few additional usability enhancements, most of which John has included back into the Prototype version. These include:

  • The zoom will close when clicking outside the zoom box area.
  • Hitting the esc key will close the zoom window.
  • Passing an option of closeOnClick: true into the fancyZoom function will close the zoom when the contents are clicked as well. This works great for image galleries.

You might also like