Overview
Shadowbox is an online media viewer application that supports all of the web's most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
Features
What sets Shadowbox apart from every other "box" out there? Here is a rather lengthy list:
| 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, its appearance can easily be altered using the only language that's really designed for such a task, CSS. |
| Media | Shadowbox supports all of the web's most popular media publishing 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. |
| Smarts | Shadowbox is smart. It uses a plugin detection mechanism behind the scenes 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. Also, Shadowbox will never overflow the viewport, showing those obnoxious scrollbars. Instead, Shadowbox will automatically adjust to whatever size the client can handle. |
| 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. |
| Universal | Shadowbox ships with support for many of the world's most-spoken languages. That means that your users will probably be able to interact with the application in their native tongue. |
| Modules | The Shadowbox code is modular. Using a custom build form, you can build a streamlined version that contains only the features you need. |
| Unobtrusive | Shadowbox uses HTML anchor elements to collect data about content to display. So if your client doesn't have JavaScript enabled, Shadowbox will stay out of the way and allow the user to follow the link normally. |
Demos
Images
Single Image (Flickr) Image Gallery (slideshow) image image
Large Image
You may have to shrink your browser window to view the difference between the various options here. See the handleOversize 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
QuickTime (mov) MPEG-4 Movie (controller disabled) Windows Media (wmv) Apple.com Trailer YouTube Google Video Movie Gallery MOV WMV FLV Mixed Content Gallery swf movie iframe
Web
Inline Content This Page External Site Google Maps Simple Form
Script
Script-triggered Message Script-triggered Gallery
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.
License
Shadowbox is licensed under version 3.0 of the Creative Commons Attribution-Noncommercial-Share Alike license. This means that it is absolutely free for personal, noncommercial use provided that you 1) make attribution to the author and 2) release any derivative work under the same or a similar license.
If you would like to use Shadowbox for commercial purposes, you can purchase a license that allows you to use Shadowbox in your projects.
Tip Jar
If you don't plan on purchasing a commercial license but you simply like to reward people's hard work, please consider giving a tip via PayPal. All donations are sincerely appreciated!
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 licensed under version 2.0 of the Creative Commons Attribution-Noncommercial-Share Alike 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.