Friday, January 25th, 2008
Library Agnostic LightBox
Category: Ajax, JavaScript
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.
Related Content:
Dang. This looks great. I wish it was modular, but I can see using this over Thickbox in more than a few projects.
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 (http://paularmstrongdesigns.com/projects/awesomebox/). Works great out of the box, and it’s easy to hack in anything you might need.
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. ;)
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…
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.
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.
Definitely a good idea on widget libraries, didn’t look at the source but the demos look pretty nice.
Cool. Because of my screen resolution (1650×1200), I was able to nest the “this page” demo 11 times.
@ajm
Here’s a YUI Lightbox :)
http://ca.gallery.yahoo.com/apps/14546
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.
Agnostic? Where’s the Mootools adapter?
@LFReD: I’m sure that Michael would be glad to accept your offer to help him build one.
@LFReD: I’ll be including one in the package soon.
@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.
Hi,
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
Notice the new mootools adapter, however, Im getting a “Unable to load Shadowbox, MooTools library not found.” error?
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?
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.
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