Disclaimer: Check the date! This post was written way back in 2008. If there are technical things in here, they may be outdated, or there may be better ways to do them by now. You've been warned.
Nothing says Web 2.0 like a lightbox, those nifty, little, modal dialogs that let you create pop-up-like functionality without the worry of pop-up blockers. There are quite a few variations of this concept, including Lightbox JS (and its many variants including Lightbox Gone Wild by Wufoo), Slimbox, and my personal favorite LightWindow. In general, they’re all pretty unobtrusive, but in this little tutorial I’m going to kick up the progressive enhancement a notch and make LightWindow even better!
Let’s start with a client who wants to use a lightbox to display a multi-view image viewer for an e-commerce site.
LightWindow can be used to display any given webpage by simply setting the class of a link to that webpage to
lightwindow. Simple enough. When the lightwindow.js file loads it searches your document for anchor
elements with a class of
lightwindow and adds the necessary
onclick handler to make the
link open in a lightbox instead of as a normal page, as unobtrusive as it gets. However, since we want our result
page to look differently depending on whether it’s being displayed as a lightwindow or a regular page, we need some
way to tell our back-end the display form-factor. To accomplish that we’ll add my own little progressive enhancement
to the page.
DOM for elements with a class set to
lightwindow and adds a parameter of
lightwindow=true to the
href attribute. With this
parameter in place, the back-end now knows which form-factor to use when rendering the page and we can accomplish our
goal with some simple PHP code. (Pardon my PHP, I’m by no means a PHP expert, this is only meant to be a simple example.):
Problem solved, have a look here and click on the “this link” link.
Of course there are a few more programming alternative along these lines, including
modifying the LightWindow object at runtime to prevent a second crawl of the DOM for elements
lightwindow class, theoretically improving performance, but I’m going to leave that for another article.