Nekkid Ninjas

For all our members that are not familiar on how to load items into the Shadowbox viewport, I wrote this little blog post.

The Shadowbox JavaScript on startup parses the XHTML DOM tree. It searches for „A” link tags that carry a relation attribute rel="shadowbox", initializes an array object and creates new click events on these links.

Image Example:

<a href="/path/to/image.png" rel="shadowbox">Linktext</a>

HTML DIV Example:

<div id="sbox">Shadowboxed content here</div>
<a href="#sbox" rel="shadowbox">Linktext</a>

The relation attribute can carry even more values like the width and height or gallery definitions.

Image Example:

<a href="/path/to/image-1.png" rel="shadowbox[gallery-1]">Linktext</a>
<a href="/path/to/image-2.png" rel="shadowbox[gallery-1]">Linktext</a>

HTML DIV Example:

<div id="sbox">Shadowboxed content here</div>
<a href="#sbox" rel="shadowbox;width=600;height=400">Linktext</a>

We also have a PDF documentation available for download[1]. This document was actually written for the previous versions of Ninja Shadowbox (1.x), but it describes detailed what one can do with shadowbox with several examples.

Have a Lot of Fun

Best Regards
Uwe Walter

[1]Shadowbox PDF documentation