diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)


Shadowbox.js – An Library Agnostic LightBox

Michael J. I. Jackson has done a remarkable work by adding another feather into the existing long list of Ligboxes and Lightwindow. Most use specific libraries such as jQuery, Prototype or MooTools but few, if any, are completely library agnostic. Michael addressed this problem with Shadowbox:

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.

Shadowbox—a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from the linking page. The default distribution of Shadowbox includes the full source code and a sample gallery (this file) that demonstrates how it is to be used.

What makes Shadowbox so different?

  • Standards: Shadowbox uses HTML markup that validates. It doesn’t depend on phony HTML attributes in your anchor tags to make it work. The web has enough problems with standards compliance as it is, and I believe we should try to not perpetuate them.
  • Adapters: It’s easy to make Shadowbox adapt to whatever platform you choose. This means that you’re not tied to a particular framework if you don’t want to be.
  • Skins: Customizing the appearance of Shadowbox is easy because it was built with designers in mind. As such, most of its styles can be altered using the only language that’s really designed for such a task, CSS. A sample skin is included that demonstrates how the default appearance may be modified to suit your site.
  • Formats: Shadowbox supports all of the most popular web media formats including images, QuickTime, Windows Media Player, Flash, Flash video, and even external web pages. This makes it easy to display your content without converting it to some other format.
  • Help: Shadowbox employs a smart plugin detection mechanism that can prevent your users from being confronted with uninformative torn image or puzzle piece icons when they don’t have the plugins they need. Instead, Shadowbox displays a helpful link to a page where your users can download the software they need to view your content properly.
  • Options: Shadowbox supports a host of options that make it highly configurable. If you don’t like the way something works, chances are very good that you can change it without digging through the code.

More info….

Shadowbox, Lightbox, Lightwindow, JavaScript, Prototype, jQuery, Mootools, Library, YUI, Cross Browser, Ajax

Share This Story, Choose Your Platform!