Submit your widget

Fancy Zoom with jquery or Mootools

Created 10 years ago   Views 27173   downloads 7591    Author orderedlist
Fancy Zoom with jquery or Mootools
View DemoDownload 156.6 KB
179
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.