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
This content was taken from a hidden div somewhere in this page!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus velit. Fusce consectetuer, neque aliquam tempus ultrices, purus urna condimentum lacus, ut placerat pede orci non elit. Integer et metus eget sem egestas varius. Vivamus ac lorem quis augue tempus pharetra. Aenean semper tempus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut id dui vitae nisl tincidunt tincidunt. Pellentesque vestibulum mollis tellus. Praesent ac ipsum sed diam pellentesque convallis. Phasellus varius. Duis rutrum nisi ac nisi. Duis libero eros, luctus faucibus, fermentum eu, malesuada vitae, nulla. Aliquam pede purus, aliquet et, iaculis sed, faucibus vel, nibh. Nam et ante eu velit cursus luctus. Sed eget mauris a lacus egestas congue. Etiam vehicula. Nam quis turpis. Aenean tempus mi in massa.
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.