Shadowbox.js (via Mowser)

Commercial licenses are available for developers that would like to use Shadowbox on a commercial website.

Shadowbox is a web-based 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?

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 Shadowbox does its best to not perpetuate them.

Smart

Shadowbox uses a smart 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 to view your content. Also, it will never overflow the viewport, forcing those obnoxious scroll bars.

Free from Frameworks

Although Shadowbox has the unique ability to adapt to whatever JavaScript framework you choose, it's just as easy to run it as a standalone app, giving the developer a great deal of flexibility.

Flexible

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, no matter what it is.

Customizable

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, making it easy to configure Shadowbox to communicate with your visitors in their native tongue.

Neat and Compact

The Shadowbox code is neat, modular, and compact. Create a custom build of the code that includes just the features you need so it's as lightweight as possible.

Plays Well with Others

Shadowbox tries to be as unobtrusive as possible. If your client doesn't have JavaScript enabled, it will stay completely out of the way and allow the page to function normally.

Examples

The simplest way to use Shadowbox is to display a single piece of content, with a thumbnail link on the page. When the user clicks on the thumbnail, Shadowbox will open to display a larger version of the image.

Content may also be arranged in a gallery for viewing all together. The gallery below uses a "skip"-style counter and is continuous.

Shadowbox is able to display Flash through the use of Adobe's Flash Player browser plugin. If Flash is not available, the user will be prompted to download and install it before they can view the content.

Single SWF SWF Gallery

In addition to images and Flash, Shadowbox supports all of the web's most popular movie formats including QuickTime, Flash video, and Windows Media Player.

YouTube QuickTime Yahoo! Video

Vimeo Google Video Flash Video

When displaying images, you have some flexibility in deciding how the image will appear in browsers that are too small to display the entire image at once. The following three examples display the same image but each uses a different value for the handleOversize option. Note: You may have to shrink your browser window to view the difference between the various options here.

Resized (the default) Clipped (no resizing is done) Draggable

Many more examples can be found in the source.

License

Shadowbox is licensed under the terms of the Shadowbox.js License. This license grants personal, non-commercial users the right to use Shadowbox without paying a fee. It also provides an option for users who wish to use Shadowbox for commercial purposes. You are encouraged to review the terms of the license before using Shadowbox.

If you would like to use Shadowbox for commercial purposes, you can purchase a license that allows you to use it on an unlimited number of commercial domains. Commercial licenses are available in two flavors: one for a single developer and one for any number of developers at a single agency or company. The form below will let you purchase both types of licenses securely via PayPal.

Credits

Shadowbox was inspired by Lightbox and LightWindow. Credit should be given to the authors of those libraries for the basic idea behind Shadowbox.

Altaic Warrior is the work of Shane Gorski and is used under the terms of the Creative Commons Attribution-No Derivative 2.0 License.

Colours is the work of Scarleth White and is used under the terms of the Creative Commons Attribution 2.0 License.

All Flash animation pieces are the original work of Wyatt Miles.