Fisher College of Business logo

Shadowbox Media Player Demonstration

Shadowbox is a tool for displaying media in an interesting, dynamic way. By making a link to a media item a shadowbox-enabled link, a user that clicks the link with JavaScript enabled will see the content open in an overlaid window and the main page dim in brightness.

Basic Usage

For most common usage, all that is necessary is to add

rel="shadowbox"

to an anchor tag that is a link to the media item to be displayed. For example, if we had a link to the Fisher logo, like so, making it a shadowbox-enabled link is as simple as adding that relationship as mentioned above, like this. The code for this link is now:

<a rel="shadowbox" href="/i/template/fisher-logo-white.png">like this</a>

To add a title to a shadowbox popup, simply include a "title" attribute on the link as well, like this:

<a rel="shadowbox" title="Here's a title!" 
href="/i/template/fisher-logo-white.png">like this</a>

While a Shadowbox popup will automatically resize itself to fit the media item being displayed, it's also possible to manually size the window with an inline width and height, like this:

<a title="Manually resized image" rel="shadowbox;width=690;height=165;" 
href="/i/template/fisher-logo-white.png">like this</a>

The resized image will be stretched to fit the window, so be careful to not stretch the image too far or to change the ratio of width to height!  Also note that width and height can be sized independently.  If only one is used, the image will be stretched and skewed, because the unset dimension will remain the default size of the image.  So make sure to set both height and width if manually resizing Shadowbox windows!

If a window is manually sized to be too big for a client's browser, the window will be resized to fit, preserving the ratio of manually specified dimensions.

Images

One of Shadowbox's main strengths is its display of images.  Single images, image galleries, and a whole host of standard images types are supported.  Plus, Shadowbox will automatically size the shadowbox window to fit the image when used.  Alternately, if you specify the dimensions of the popup, Shadowbox can resize the image automatically.

The first step is displaying single images. This is especially useful for particularly large or detailed images that require more screen real estate for display.

Content Galleries

Showing thumbnails of images and allowing zooming in is a great use of Shadowbox, as it allows users to preview images before examining them in more detail.

To do this, Shadowbox has the concept of sets of shadowbox links.  To create a set, all it takes is adding the name of the set in square brackets after "shadowbox", like so:

rel="shadowbox[galleryName]"

Galleries may have any name - "galleryName" is just a placeholder. As such, you can have multiple galleries on a given page, as long as they are each given different names.

An example of a gallery in action is below.  This gallery uses image tags that are wrapped in anchor tags to make the images into links.  The links themselves point at the full size images.

The code for the gallery is:

<a rel="shadowbox[PeopleThumbs]" href="/i/banners/home/2010-01-fps-oracle.jpg">
<img class="border" style="width: 150px;" src="/i/banners/home/2010-01-fps-oracle.jpg" alt="" />
</a>
<a rel="shadowbox[PeopleThumbs]" href="/i/banners/home/200912-BizQuiz.jpg">
<img class="border" src="/i/banners/home/200912-BizQuiz.jpg" alt="" style="width: 150px;" />
</a>
<a rel="shadowbox[PeopleThumbs]" href="/i/banners/home/200912-NCACI.jpg">
<img class="border" src="/i/banners/home/200912-NCACI.jpg" alt=""  style="width: 150px;" />
</a>

Galleries aren't just limited to images, though - in fact, as long as Shadowbox knows how to display the media type, you can add it to a gallery.  So you can have a gallery that includes images, flash movies, YouTube videos... whatever you want!

Large Images

Shadowbox has the capability to display overly large images in a few unique and interesting ways.  Depending on configuration, images can be clipped to fit in the browser, resized, or present the user with a draggable interface by which to explore.

Clipped (no resizing) Resized Draggable

Note that this feature requires additional JavaScript in the page in order to activate the custom display modes. For example, the JavaScript for the above 3 links is as follows:

<script type="text/javascript">// <![CDATA[
window.onload = function() {
  Shadowbox.setup('a[title="draggable"]', { handleOversize: "drag" });
  Shadowbox.setup('a[title="clipped"]', { handleOversize: "none" });
  Shadowbox.setup('a[title="resized"]', { handleOversize: "resize" });
};
// ]]></script>

Flash

Shadowbox has the capability to display Flash files of all sorts, including vendor tools such as SlideshowPro.

Slideshow Pro Slideshow Slideshow Pro Video Stand-alone SWF

For many vendor-released Flash videos, it's often necessary to set a variety of Flash variables via the flashVars attribute.  This is an advanced feature - contact ITS for details and assistance.

Movies and Other Media

YouTube

Miscellaneous

Shadowbox can open other webpages, which stops users from needed to open new windows or tabs, and lets us keep visitors on the FCOB website.  Some examples:

It can even link to "hot spots" in image maps, so that clicking particular portions of an image map will open other web pages.  This is great for adding notes to concepts displayed graphically without the need to jar the user by opening a new web page.

FisherHall GerlachHall Blackwell PfahlHall SchoenbaumHall MasonHall

To activate Shadowbox for an image map, simply add the "shadowbox" class to the map tag, like this:

<map class="shadowbox" id="demomap">
... area tags for the image...
</map>

Hidden content on a page can be made visible or HTML content can be displayed dynamically in Shadowbox, which provides an elegant way to provide user feedback or further options, such as with contact forms, error messages, etc.

More Reading

Shadowbox has some pretty good documentation, and the usage page gives a good introduction to using Shadowbox.