JavaScript Zoom Effect for Small Photos
Published 10/28/2008 – Tips Programming – 1 comment
Many personal websites will display photos on the front page of the website, usually in a thumbnail size. Small photos provide context because they show several photos from a given photostream, however they can't provide much detail due to their small size.
To get more detail, a thumbnail may link to an information page where the photo lives, or link to a larger version of the same photo. However these options encourage visitors to leave the site. To retain site visitors, while giving them more detail, a popular effect is to provide a larger version of the photo inline when the photo is clicked. Showing photo metadata in the pop-up gives the visitor even more information. I have integrated a couple of these libraries into the front page of this website and wanted to give an overview of their features.
Lightbox
One popular approach is the Lightbox JS. Lightboxes are modal windows, which means users cannot click outside the pop-up. Lightboxes force the user to focus on the pop-up content by darkening the area that surrounds it. Lightboxes generally let users navigate multiple items by keyboard, which makes them great for galleries or portfolio websites. However Lightboxes have been criticized for slow load times. When a Lightbox is used for a photo gallery, it is resized for each photo that is a different size than the previous one. Depending on how many items the visitor is viewing through a Lightbox, this approach may be too slow.
FancyZoom
Alternatives to Lightboxes take different approaches and have different tradeoffs. The next few libraries here animate the transition as the pop-up opens as well. This technique was pioneered by Cabel Sasser in his FancyZoom library. FancyZoom is a great alternative to Lightbox for some applications, though it has downsides addressed by the next library. Additionally, $39 is requested for FancyZoom when it is used on commercial websites.
John Nunemaker made a rewrite of FancyZoom using Prototype. A convincing reason for me was that it builds on top of Prototype which I include in my site anyway. Additionally I find that the animation is snappier and more pleasing. His version also has rounded corners and supports text and Flash movies embedded in pop-ups as well. I have an example of a Flash movie of photos from a recent trip here. Google hosts the Prototype and scriptaculous libraries which provides an additional speed improvement. The John Nunemaker FancyZoom rewrite is open source and has a demo site here.
A potential disadvantage of FancyZoom is that it requires all content to be loaded on the page. Since there is no round trip to the server when photos are clicked, the pop-up animation is faster, but for sites with large images, it probably makes more sense to load images via ajax.
Highslide JS
The library I used before FancyZoom was Highslide JS. Highslide is loaded with features and supports basically everything I've mentioned so far and more, including the ability to move pop-ups around on the page, auto-play slideshows, and pause playback with the spacebar. The library is broken apart so users can remove pieces that are not needed, which helps reduce client download time. Highslide makes the best gallery in my opinion, since it supports loading large images via ajax, is keyboard navigable, easy to style, and returns the user to the original view after the last item is displayed. Check out the Highslide examples and Barebones samples. Highslide is free for non-commercial use. Prices start at $29 for commercial websites.
1 comment
Mark Nutter 2 months ago wrote:
I use lightbox on my site in the journal section and it works well enough. I have a feeling, however, that it is one of the most overused javascript effects on the web right now. I hadn't seen fancyzoom though. I like it a lot, much more than the expand up and then expand sideways effect lightbox has.