The Secret of Super Fast Lightboxes

The lightbox technique is a beautiful combination of (X)HTML, Javascript and CSS, allowing images or (X)HTML elements to be shown in a modal fashion on top of the page the user is browsing. Traditionally lightboxes have been implemented using Javascript, yet most of the functionality can be archived using (X)HTML, CSS and no Javascript at all.
This article describes a PoC demonstrating the lightbox technique using no Javascript by taking advantage of the :target pseudo-class, which is part of the Selectors Module of the CSS 3 Working Draft. This also means this technique only works in Firefox and Safari at the moment.

The :target pseudo-class allows different formatting to be applied to an element depending on whether it is the target of a URI with an anchor identifier. e.g., http://example.com/index.html#a-section would make the named anchor a-section or the element with the id a-section that target. You can then use the following CSS to highlight a-section when it is targeted.

#a-section:target {

    background: yellow;

}

While this is a nice little technique for section highlighting ¹, you can get much more interesting effects when you start playing around with how the element is displayed. The CSS Lightbox Demonstration does just this.

The lightbox is given a class lightbox, which when the page is initially loaded makes it invisible via the following CSS

.lightbox {

 display: none;

}

each lightbox is also given a unique id on the page, so we can create links to target them.

The following CSS is used to display a lightbox when it's targeted

.lightbox:target {

 display: inline;

}

Pretty simple, eh? Well, not really, there is a whole heap of CSS used to format the overlay² and lightbox frame and it's controls. And the lightbox itself requires a fair amount of scaffolding. Here's an example of a lightbox and it's link:

	@lt;p id="showimagelink"@gt;@lt;a href="#showimage"@gt;@lt;img class="thumb" src="resources/images/wallpaper1-thumb.jpg" alt="Thumbnail for a picture of trees in a park with sunbeams."/@gt;@lt;/a@gt;@lt;/p@gt;

 @lt;div class="lightbox" id="showimage"@gt;

 	@lt;div class="overlay"@gt;@lt;/div@gt;

 		@lt;div class="content-frame image" style="width: 480px; height: 400px; margin-top: -200px; margin-left: -240px;"@gt;

 			@lt;div class="content image" style="background: url('resources/images/wallpaper1.jpg') no-repeat;" @gt;@lt;/div@gt;

 			@lt;div class="controls bottom"@gt;@lt;a class="close-lightbox" href="#showimagelink"@gt;Close@lt;/a@gt;@lt;/div@gt;

 		@lt;/div@gt;

 @lt;/div@gt;

You might notice that the image displayed in the lightbox is a background and not an img. This is so the browser won't load all the images on page load, but instead load them when they are displayed³. This means we need to specify the image size in the (X)HTML, but due to issues with margins and percentages⁴

The advantages of CSS Lightboxes over JS Lightboxes are:

• They are much faster
• They require less to download
• The back, forward and reload buttons work as expected

It's not all rosy however:

• It only works in Firefox and Safari
• Images must be backgrounds in order for the browser to delay their loading
• When constructing the (X)HTML, you need to know the size of the image
• It requires a lot of (X)HTML

Support for IE and other browsers could be implemented by simulating the :target pseudo-class using Javascript, though this would defeat the purpose of this demonstration. Such a combination though would give you a lightbox that works across all the major browsers, is fast and doesn't break the back, forward and reload buttons.

Further reading

While reaching this article, I stumbled upon the following related sites:

• Fun with :target demo - Virtuelvis
• CSS3 :target Tutorial
• FrogLace css Lightbox⁵

1. sometimes it's very hard for a user to determine what exactly an URI with a anchor identifier is supposed to be pointing to. [back]
2. The overlay is the dark semi-transparent element that covers the page [back]
3. Don't ask me why the browser is smart enough not to load hidden backgrounds but not smart enough no to load hidden images [back]
4. Neither Firefox not Safari would correctly handle margin-top: -50%, but they both seam happy with margin-top: -200px, which is basically the same thing in this case, we need this information anyway to centre the lightbox. [back]
5. - This was the only prior work on CSS lightboxes I could find. [back]

Meebo is Great »« How to Create a Javascript Speedometer