shining the way

The ever so popular, loved as well as hated lightbox technique for presentating images and video has been around for a long while. When it works, implemented with fitting style - it offers a pleasing display option which can be matched perfectly to the site's design. Whether you like this presentation style or not - chances are you will be asked for a lightbox-style presentation from one of your clients sooner or later. I've tried out many, going through a number of different options aiming for an optimum solution - and have yet to find one that does all we would like.

Some lightbox displays are quite clunky and glitchy - others wonderfully quick, light and elegant. Some work for certain structures and layouts, others work on all. Mostly reliant on Javascript and not very accessible - there are now much better scripts available, shared by clever geeks who give us (= webdesigners who only write HTML and CSS, and not Javascript) more effective solutions.

This post will list my most recent findings and preferred options due to the accessibility and well implemented customisation options, listed in no particular order. Please do have a look at the demo for each for easier viewing of source code.

CSS3 lightbox display by Benjamin De Cock // deaxon.com

" sulfer "

  • thumbnail image
  • thumbnail image
  • thumbnail image
  • thumbnail image
  • thumbnail image
  • thumbnail image
  • thumbnail image
  • thumbnail image

stills from the video by Slipknot © 2009 view lightbox demo

This approach uses CSS3 alone to create the same visual effect as the standard lightbox: a translucent overlay covers the window and the large version of the image gets displayed, centred and framed, including the close link (x). This would be the ideal solution, no reliance on JS - pure and clean CSS only. Making use of the :target pseudo-class - the size, position and opacity of the large image are changed and animated when the respective thumbnail is clicked - all by the magic of CSS.

There are some drawbacks to this technique as it relies on uniform image sizes and can be awkward to position on content heavy pages. Also, ... of course, this will not work in IE. We can but dream that one day...

ColorBox // colorpowered.com/colorboxa light-weight, customizable lightbox plugin for jQuery

✱ Doodles...

  • thumbnail image
  • thumbnail image
  • thumbnail image
  • thumbnail image
  • thumbnail image
  • thumbnail image
  • thumbnail image
  • thumbnail image

a few scribbles, doodled in OmniSketch view lightbox demo

This is one of my favourite scripts, ever — I have used it many times and it has never let me down. It works in all situations, vertical or horizontal scrolling included, has multiple demos included to help you along in the customisation. It is very lightweight, very easy to implement and so flexible in terms of styling that you can easily edit every small detail to fit your design.

Colorbox is a jQuery plugin - this means that you will need to load both the jQuery and the colorbox files with your gallery page, alongside the CSS. To setup the different presentation styles - you only need to add a rel=" " attribute to the link to the large image and trigger your chosen style.

If you are looking for a good solution which you can customise to your heart's content - then this might be your answer. The documentation Jack Moore has written on his plugin is excellent, and the demos are very clear so you will be up and running in no time ;)

16/02/2011

Comments are closed.