Markup

The simplest way to use Shadowbox is through your HTML markup. At the very least, you must add a rel="shadowbox" attribute to your links. For example, say you have this link to an image on your page:

<a href="myimage.jpg">My Image</a>

In order to set up this link for use with Shadowbox, simply change it to this:

<a href="myimage.jpg" rel="shadowbox">My Image</a>

If you would like to display a title for your image, simply add a title attribute to the link.

<a href="myimage.jpg" rel="shadowbox" title="My Image">My Image</a>

You must explicitly tell Shadowbox the dimensions to use to display content other than images. This is done by adding a few parameters to the end of the rel attribute, separated by semi-colons (like a CSS style declaration). To specify a movie’s height and width, use the height and width parameters. Note: unlike in CSS, these values must always be specified in pixels.

<a href="mymovie.swf" rel="shadowbox;height=140;width=120">My Movie</a>

Additionally, you may set Shadowbox options on a per-link basis. To do this, you must include a JSON-formatted parameter called options. An example could be:

<a href="myimage.jpg" rel="shadowbox;options={overlayOpacity: 0.5, resize: false}">My Image</a>

In addition to displaying single images and movies, Shadowbox is also capable of displaying galleries of content. In order to designate a link as part of a gallery, you must add the gallery name to the rel attribute between square brackets immediately following the word “shadowbox”. For example, the following markup creates a gallery called “Vacation” with two pictures:

<a href="beach.jpg" rel="shadowbox[Vacation]">The Beach</a>
<a href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>

Galleries may be composed of content of many different types. The following markup is a compressed version of the last demo above. It demonstrates how various media can be combined into a single gallery.

<a rel="shadowbox[Mixed];options={counterType:'skip',continuous:true}" href="vanquish.jpg">jpg</a>
<a rel="shadowbox[Mixed];width=520;height=390" href="caveman.swf">swf</a>
<a rel="shadowbox[Mixed];width=292;height=218" href="kayak.mp4">movie</a>
<a rel="shadowbox[Mixed]" href="index.html">iframe</a>