Shadowbox.js by Michael J. I. Jackson

Version: 1.0

Introduction

Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating away from the linking page.

Motivation

I know what you're thinking—this has been done before. 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, HTML, and even external web pages. This makes it easy to display your content without converting it to some other format.
Error Handling Shadowbox employs a smart plugin detection mechanism that can spare your users from confusing 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 that will allow them 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.

Demos

Images

Single Image (Flickr) Image Gallery image image

Large Image

You may have to shrink your browser window to view the difference between the various options here. See the handleLgImages option for more information.

Clipped (no resizing) Resized Draggable

Thumb Gallery

Unlike the previous image gallery, this one is triggered by thumbnail links. It also uses a skip counter, synchronous animations, and is continuous.

Image Map

Shadowbox supports client-side image maps through the use of area tags.

Flash

Single SWF SWF Gallery swf swf Flash Video

Movies

Single Movie (mov) Single Movie (mpeg-4, controller disabled) Single Movie (wmv) Apple.com Trailer YouTube Google Video Movie Gallery MOV WMV FLV Mixed Content Gallery swf movie iframe

Web

Inline This page External site

Download

Click here to download the full Shadowbox distribution, including the sample gallery and documentation files.

Click here to download just the code and other files necessary to run Shadowbox.

Alternatively, you can always check out the latest source code from Shadowbox' Subversion repository on Google Code

$ svn checkout http://michaeljackson.googlecode.com/svn/trunk/shadowbox

Tip Jar

If you use Shadowbox in a commercial product, or you simply like to reward people's hard work, please consider giving a tip via PayPal. All donations are sincerely appreciated. Thanks!

License

Shadowbox is copyright © 2007 Michael J. I. Jackson and is licensed under the GNU Lesser General Public License.

Credits

Shadowbox was inspired by Lokesh Dhakar's Lightbox and Kevin Miller's LightWindow. Credit should be given to the authors of those libraries for the basic idea behind Shadowbox.

The default Shadowbox Flash video player is Jeroen Wijering's JW FLV Player. It is distributed under the Creative Commons Attribution-Noncommercial-Share Alike 2.0 Generic license.

All Flash animation pieces in this gallery are original pieces included courtesy of Wyatt Miles.

Compressed versions of the files necessary to run Shadowbox are included in the default distribution in the build directory. The compression was performed with the excellent YUI compressor by Julien Lecomte.