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.

We see photographers on the street from time to time taking pictures of the building. In fact, the first day I got to Boston this fall, I walked into my hotel room and there was a framed photo of Stata on the wall.

The department basically occupies the eighth and ninth floors of the Dreyfoos tower side. There’s a nice common space with some red couches and a spiral staircase.

All of us first years share an office together on the ninth floor (32-D976). The room is elliptical, with our desks along the side with windows and the other “wall” being a series of wooden bookshelves. It’s great to share an office with the cohort, as we all take all the same classes the first year as well.

Here’s the room for “Meg Data” just across the hall from our office. I was really hoping it was a woman named “Meg Data”… marrying her would get me one step closer to becoming “Dr. Data.” Alas, “Meg Data” or “MEG Data” apparently is simply a label for some data store—possibly some servers.

The majority of the building is the Computer Science and Artificial Intelligence Lab (CSAIL) so there are posters up for fun-looking talks that I’m too busy for.

Here’s my desk (with Foxkeh!) and my new bike which I’ve been bringing up to the office. The final photo is a photo of me with an “I ♥ The Web” poster in commemoration of OneWebDay.

We’ve been getting pretty busy with the readings and work for our classes, as well as occasionally hanging out. I hope to write some more posts both linguistic and non-linguistic in the coming days on life at MIT.

Related posts:

1. I’m Busy to Die
2. Dinner with Barack and Hillary
3. Linguistics in 嘉義

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