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.

Shadowbox.options.players=["html","iframe","img","hybrid"];

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.

height

(Number) The height of the object (in pixels)

width

(Number) The width of the object (in pixels)

ready

(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)

resizable

(optional, Boolean) True if the content can be dynamically resized by the script (e.g. images, but not most movie formats)

append()

Appends this object to the DOM

remove()

Removes this object from the DOM

onLoad()

(optional) Called after the content is loaded and the loading layer is hidden

onWindowResize()

(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.

Related posts:

1. I’m Seriously Dreaming of a White Christmas
2. The Gift That Keeps On Giving
3. Atayal cultural festival

Related posts brought to you by Yet Another Related Posts Plugin.