Friday, January 25th, 2008

Library Agnostic LightBox

Category: Ajax, JavaScript

There are a lot of lightboxes out there. Most use specific libraries such as jQuery, Prototype or MooTools but few, if any, are completely library agnostic. This poses a challenge when you want to incorporate, say, a really cool lightbox from MooTools into a Prototype application.

Michael J. I. Jackson (no relation to the singer) wanted to address that and I think he’s done a stellar job with his newly released Shadowbox LightBox component:

A few weeks ago, I was looking for a Lightbox-like script that would allow me to display more than just pictures. In addition to static images, my client required the ability to display various types of movies including QuickTime and SWF. The only script that fit the bill was Lightwindow—a nice piece of work to be sure—but it required the Prototype + Scriptaculous combo and I was already using YUI.

Besides, I thought, it would be really great to have a full-featured media viewing application that was library agnostic. Then, if I need to use a different framework for some particular reason, I can easily switch.

Thus was born Shadowbox—a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application built entirely in JavaScript. It’s currently in beta testing phase, so please let me know on this post if you find any bugs or have problems with it.

The approach of making ShadowBox library agnostic and using an adapter architecture for plugging in different frameworks should really help to generate some buzz and acceptance of this plugin. Apart from that, the breadth of features and the smooth functionality make it very enticing.

Posted by Rey Bango at 11:48 am

4.4 rating from 41 votes


Comments feed TrackBack URI

Dang. This looks great. I wish it was modular, but I can see using this over Thickbox in more than a few projects.

Comment by azmoviez — January 25, 2008

As a YUI user myself, I can sympathize: tracking down a YUI-based lightbox library is almost impossible. (I wonder why?)

If you’re in a strict YUI environment, I heartily recommend Awesomebox ( Works great out of the box, and it’s easy to hack in anything you might need.

Comment by ajm — January 25, 2008

azmoviez: I’m not sure exactly what you mean by “modular”. If you’re talking about separating out the different media types into separate classes, I actually thought about that. However, I didn’t see any real benefits to file size.

ajm: I use YUI too…that’s why I made it. ;)

Comment by mjijackson — January 25, 2008

Great job! Love the library…

I’d make one small suggestion…in other words instead of just supporting rel=”shadowbox[Vacation]”… support rel=”lightbox[Vacation]”… so that you can agnostically adopt the library…

this is particularly useful for large sites that have adopted lightbox heavily as it saves hours of work…

Comment by OwenL — January 25, 2008

mjijackson: I didn’t mean that as a complaint. I’m a bit of a minimalist and don’t always need something with all the functionality rolled into one file. The shadowbox file is plenty small, but yeah I would love a photo / flash / video package option.

Comment by azmoviez — January 25, 2008

OwenL: That’s a great idea…maybe an option for “Lightbox-compatibility mode” to help others with a migration.
azmoviez: Don’t worry…I didn’t take it badly. ;) I understand about wanting to separate it out into separate classes. Like I said, that was my initial thought. It is still in beta though and I’m keen to try it out.

Comment by mjijackson — January 25, 2008

Definitely a good idea on widget libraries, didn’t look at the source but the demos look pretty nice.

Comment by Andy Kant — January 25, 2008

Cool. Because of my screen resolution (1650×1200), I was able to nest the “this page” demo 11 times.

Comment by emehrkay — January 25, 2008

Here’s a YUI Lightbox :)

Comment by MezZzeR — January 25, 2008

It is an interesting idea to use the rel attribute of a link for the settings, I wonder if you can set those settings externally and not in the markup.

I checked out the source – it looks pretty nice. And as for a new, open source project, to be this well documented is unheard of. All of the demos worked perfectly for me. I am impressed – and it takes a lot to impress me for JavaScript components.

Comment by Marc — January 25, 2008

Agnostic? Where’s the Mootools adapter?

Comment by LFReD — January 25, 2008

@LFReD: I’m sure that Michael would be glad to accept your offer to help him build one.

Comment by Rey Bango — January 25, 2008

@LFReD: I’ll be including one in the package soon.

Comment by mjijackson — January 26, 2008

@Marc: I considered alternate methods of passing in link parameters, but in the end the HTML markup method seemed the most convenient to me. Otherwise, you’d have a link in one part of your page, and some other code somewhere else that defined what Shadowbox should do with that link. You’d be scrolling up and down to make sure everything matches up correctly.

Comment by mjijackson — January 26, 2008


thanks for sharing your work with us. This is a great ligthbox like script and certainly the most complete i’ve ever seen. I’ve noticed something during testing your script. Under Firefox with no wmp plugin, on the movie gallery demo, when i try to load wmp movie, i’ve got this text “Windows Media Player browser plugin to view this content.” id=”shadowbox_content”>”. the html behind the scene sems to be broken and if i click the navigation link “next”, the next movie loads and plays, but the message stays, making movie navigation bar hidden. Now, if i click on the single wmp movie, this message appears again just under the first message, which is not cleared obviously.

i hope this can help you and i apologize for my english, i’m not use to speak english :).

thanks again for your wonderfull work

Comment by frayde — January 27, 2008

Notice the new mootools adapter, however, Im getting a “Unable to load Shadowbox, MooTools library not found.” error?

Comment by LFReD — January 27, 2008

A note on usability.. Making the user hunt the “prev, next, close” links are not exactly userfriendly. Perhaps a static positioned bar in the top or bottom of the page would be better?

Comment by erlando — January 28, 2008

I’ve always loved Lightbox, and this just makes it even sweeter. I’m glad their still working on it :)

And Lightbox can plug into YUI.

Comment by mattk — January 29, 2008

Looks great, but I seem to have problems with certain Dojo 1.0 widgets rendering in IE6 (looks good in FF, Safari, etc)….life cycle of the widget halts half way through

Comment by GregW — January 30, 2008

Leave a comment

You must be logged in to post a comment.