I came across FancyZoom the other day, which calls itself "Smooth Javascript Image Zooming For Your Web Pages". It's a lot like lightbox, but with a "zoom" effect and no shading over of the original page.
Just include the two JavaScript files in your page and add an onload call to your window object:
<script src="/js/FancyZoom.js" type="text/javascript"></script>
<script src="/js/FancyZoomHTML.js" type="text/javascript"></script>
<script>window.onload = function() { setupZoom(); }</script>
Then the zoom treatment will be added to any links on your page which point to a jpg, gif, png, bmp, or tiff file (meaning that the link has to end in one of the aforementioned extensions). If you want to exclude one of your links from the zoom treatment, add a rel="nozoom" attribute to it.
So when might you want to use FancyZoom and when might you want to use Lightbox? I'd say that FancyZoom is pretty good for a script where users might want to look at one or two images on a whim, because it seems to run a little faster and doesn't dim the background page. Lightbox, with its "Previous" and "Next" links, seems better script to use if you think people will be browsing multiple images in a "slideshow" fashion, because in that case you want the background page to be dimmed out so that all of the user's attention is on the image in the foreground.
Post a comment