Oct 22
8 Excellent Ways To Display Information To Web Users
Fancyzoom, Shadowbox, Lightbox2, Mediabox, Highslide There are loads of great pop-up galleries, “lightbox” clones and mediaboxes around that are freely available to web designers. All can usually display images and text, and some html and video embeds.
Here we run through some of our favorites and looking forward to seeing your sites with these great tools in place.
Lightbox 2
The sequel to the original “lightbox” is compatible in all modern browsers, lightweight and easy to install. You can even add fancy pants transitions and group the images into sets.
http://www.huddletogether.com/projects/lightbox2/
Fancyzoom
Smooth Mac-like (Apple website) effect that zooms images with a nice title bubble below the image and collapse “close” graphic. Pretty cool as it preloads images in the background and automatically scales images. A license is needed for commercial sites.
http://cabel.name/2008/02/fancyzoom-10.html
Fancyzoom meets jQuery
A rewritten version of the above Fancyzoom that is now ported into JQuery which will suite sites with JQuery already plugged in. It is also easy to include html (images, text, headings, flash or whatever) into the zoom. Go and check this one out for sure.
http://orderedlist.com/articles/fancyzoom-meet-jquery
Highslide
Very popular and highly customizable media gallery viewer. You can add images, html, flash, iFrames and have many options to how the elements are displayed: gallery with floating captions, white rounded outline, no border and simple close button, and loads more. To make life even easier, there is even now a Highslide editor so you don’t even need to touch any code. How cool is that?! A license is needed for commercial sites.
http://highslide.com/
Shadowbox
This neat and compact media viewer is free from frameworks and yet is still highly flexible. One of the great features (apart from supporting all the most popular video formats: vimeo, youtube, Google video etc) is the support for image maps through the use of area tags. A license is needed for commercial sites.
http://www.shadowbox-js.com/
MediaboxAdvanced
Based on mootools and slimbox, MediaboxAdvanced can display anything from JPEG images or flash videos, to PHP pages. A new feature is Twitter media support and integration. Extremely flexible.
http://iaian7.com/webcode/mediaboxAdvanced
PrettyPhoto
This media “lightbox” is a jQuery based lightbox clone. Comes with theme support and can even mix galleries between iFrame, quicktime, photo and Flash elements. Simple and the darkened background and loading counter work well together.
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
JQuery tools overlay
Very flexible and loads of different uses possible with this mediabox. Apple effect, creating modal dialog boxes, galleries, playing videos – you name it. Probably the coolest of the lot with nice overlay graphics and the ability to combine a photo with a cool formatted description.
http://flowplayer.org/tools/demos/overlay/index.html
Summary
All of the above are a great way to display information to web users in an interesting and clear to follow way. Deployment of each may depend on the final effect you are aiming for and how comfortable you are customising the plugin.
Another consideration to be aware of would be to consider any mootools or JQuery conflicts with other plugins you may have active on the page. A good way around that is to either use a “lightbox” with the same framework library or ensure that nonconflict mode is enabled.
Let us know what delights you assemble.
Happy lightboxing!