Fancy Zoom with jquery or Mootools

Home Lightbox & Dialog & OverlayFancy Zoom with jquery or Mootools

14 years ago Views

17954

4755

orderedlist

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.

Tag: image lightbox