Oct

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!

2 Comments to “8 Excellent Ways To Display Information To Web Users”

Rosemary June 29, 2011 at 5:04 am
hiho ! do you know who I am? the site isn’t the same as it once was

Reply
halloween party desserts October 17, 2010 at 9:52 pm
I am not really sure if best practices have emerged around things like that, but I am sure that your great job is clearly identified. I was wondering if you offer any subscription to your RSS feeds as I would be very interested.

Reply