mitcho Michael 芳貴 Erlewine

Postdoctoral fellow, McGill Linguistics.


Creating an image-sized iframe overlay with Shadowbox

I recently have been working with the Shadowbox JavaScript library for an upcoming revision to the MIT Edgerton Digital Collections website. Shadowbox is a nice [[Lightbox (JavaScript)|lightbox]] library designed to work with various JavaScript libraries like jQuery, prototype, and mootools with a nice modular design.

Shadowbox is organized around different “players”—one for each kind of media that will be displayed. The library by default comes with players for Flash, HTML fragments, iframes, QuickTime, and Windows Media. Some of these players, like those for images and video, automatically recognize the media size and adjust the lightbox accordingly, while others such as the iframe player can use a set size or can fill the screen. For the Edgerton site, though, we had a need for displaying an iframe but in the dimensions of a set image, so that we could display the image with an overlay. Here are some notes on how to implement a custom player for Shadowbox.

The first step to getting Shadowbox to recognize a custom player is to modify the players loaded by shadowbox.js. I called my player “hybrid,” as it’s like a cross between the iframe and img players.


Now Shadowbox will try to look for the file players/shadowbox-hybrid.js. That’s where we will create our custom player. Start by duplicating the iframe player file. Next, we can make one more change to shadowbox.js. In the getPlayer function, add a line that will return “hybrid” when it recognizes a lightbox which should use the hybrid player. I added the following line, which uses the hybrid player when the text “galleries” is in the a tag’s href attribute.

if (/galleries/.test(content)) return "hybrid";

Finally, you must actually write the new player. There’s a readme file which describes the interface:

All players should implement the same interface. This makes it possible for the Shadowbox class to know what methods to call and properties to check on player objects.

The interface is described here, with some simple explanations of how each method and/or property is to be used.

(Number) The height of the object (in pixels)
(Number) The width of the object (in pixels)
(optional, Boolean) True if the content is ready to be loaded, false otherwise. Useful when the script should wait until the content loads before proceeding (see below)
(optional, Boolean) True if the content can be dynamically resized by the script (e.g. images, but not most movie formats)
Appends this object to the DOM
Removes this object from the DOM
(optional) Called after the content is loaded and the loading layer is hidden
(optional) Called when the window is resized

I found these directions quite easy to follow. For our purposes, there was also a note on how to set an object’s height and width based on an image.

Hopefully these notes are helpful for others who hope to take full advantage of this very powerful JavaScript library.

Tags: , , , , ,

If you enjoyed this post, make sure you subscribe to my RSS feed (optionally with tweets from my Twitter)!

  • rico

    Thanks for share, I,m use it in my blog but found some error, maybe some misconfiguration in my script.