Turn On the Lightbox, Tune Into the Interaction Experience

Don't underestimate the importance of even the tiniest user interactions on a website, from link effects to scrolling as well as every digital detail in between.

One such interaction that takes place on millions of websites each day is the presentation of a lightbox. Presenting content through a lightbox (which is used most often to display images and videos) is now a very common practice for information publishers, service providers and Internet retailers, so knowing the most popular solutions in active use across the 'Net today will ensure your design is using nothing but the best for your digital presence.

Wait... what the heck is a lightbox and how does it work? If you know, feel free to skip ahead, but a lightbox is essentially a JavaScript library that makes it possible to add a layer of content (e.g. images and video) in a separate window that fills the user's screen, but dimming out the rest of the page. The term is sometimes used interchangeably with "modal," which are typically more specific to text-based system messages. Not all lightboxes are created equally, however, in terms of their styling, animation and positioning - essentially the interaction experience that results from their use.

One of the optimal lightbox solutions is that of Lightbox; the original lightbox script from software developer Lokesh Dhakar who wrote the popular solution over eight years ago. First developed in JavaScript, but now available in jQuery, the script is highly customizable making it a wise choice for this essential interaction experience.

There are, of course, many others. When the aforementioned LightBox was released as opensource, many developers quickly modified the code to create plugins including Colorbox, Magnific Popup, Slimbox and Thickbox, which are still used today. These are some of the best-known offerings available, but in the end, the ability to customize the design and actual interaction is what will matter most, and those released in the past eighteen months to two years have focused on being smaller, smarter and more elegant in the process.

Website Magazine covered Strip, for example, nearly one year ago and it was well received at that time by the digital design community. Another personal favorite that I've used in several projects recently is Featherlight by Noel Bossart. Coming in at just 6kb (400 lines of Javascript, 100 of CSS), the lightbox supports images, ajax and iframes, and could prove ideal for use as a gallery.

Different offerings, of course, will result in different experiences so it is always best to have a high awareness of both new and under-the-radar offerings as they pursue those which are best for their own users interactions. Some of those offerings include FancyBox, Uglipop (modal), Chocolat, and LightGallery.

Lightboxes can be a virtual blessing for time-on-site metrics and general activity, but they can also leave users with a poor impression of a website if they are difficult and cumbersome to use. Choose wisely and you'll be on the fast track to 'Net success.