• UserId: 1
  • Title: Litebox
  • Url: litebox
  • Summary: Litebox
  • Search:
  • DateCreated:
  • DateModified:
  • Published: 1
  • Pageable: 1

As I helped Simon out last night setting up Litebox on his blog, well CG Partnership's - I decided to throw it on here too, as it's easy once you've done it the first time (as with most things in life). You may have come across Litebox whilst browsing the web, as many would categorise it under 'Web 2.0', which instantly attracts newcomers. I like it as it allows for a simple way to create a photo album on a site, whilst still remaining accessible - for example, if you're using a screen-reader, or have Javascript disabled the core links still work.

There are several ways to implement Litebox. You can use the traditional thumbnail approach:

Example 1

To expand on the thumbnail approach you could have a group, or album of thumbnails:

Example 2 Example 2

You could also revert to a simple text anchor:

Example 3

Then there is the option of group/album text links:

Example 4 A Example 4 B

And finally, something I added to the mix late last night - a single text-based link that triggers a group/album:

Example 5

The last example could be adapted so that you show a single thumbnail as your 'trigger' instead of the more traditional text link. If you're interested in how all of the above were achieved, you could either view the source code of this page, or tax your brain by figuring each one out yourself. I'll give you a hint for how to achieve the single link/multiple pictures though - display: none;

There is, however, one fairly major problem with Lightbox, or the lighter, Litebox - neither validate according to the W3C's rules for both HTML/XHTML and CSS. This is something that I am looking into myself, with the outcome hopefully being a valid version.

Categories that this Post has been filed under

  • Articles - Longer posts that warrant an article status
  • Computers and Technology - Hardware, Software, Computers and Technology
  • Web - The Web, XHTML/CSS/ASP/.NET/SQL/PHP etc.

Tags that this Post has been tagged with


Thats cool, but i see so much code stuff in the day I cant bring myself to look how its done.


The actual Javascript is split across 3 files, as it uses 2 scripts created by other authors, along with the larger Litebox Javascript - around 18kb. Luckily it's smaller than the original Lightbox and 18kb is swallowed up easily in today's era of Broadband.

As for the HTML/CSS - it doesn't validate 100%, which I'm trying to find a solution for...


You should let your old jobbers know you should be still on the payroll


simon on this ere page a couple of the pic are over 1mb for no reason, just thought u might want to know.


Add a Comment