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
XML Feeds