Using Shadowbox

Shadowbox is a new technique to add "pop ups" to your site. There are several lightbox clones, which opens media and pages in a new layer. Shadowbox is very flexible, as it not only lets you open images but many different file formats, mainly video, flash and also webpages. What’s also a great thing about this script is: it doesn’t depend on any other framework (e.g. mootools, jquery) and so is compatible with many other plugins. Also, it keeps down the page load and file sizes to be loaded in the visitors browser.

If you want to find out more about Shadowbox, please visit the project home page at: http://www.shadowbox-js.com/
You will find many information on how to use Shadowbox and also some great examples. I won’t describe all possibilities here, so check out the project page!

Showing media is very easy. You just have to define a small piece of code to the rel attribute in a link tag. Following are some examples:

The general syntax
Syntax:
<a href="URL" title="CAPTION" rel="shadowbox[SET];width=WIDTH;height=HEIGHT">HTML</a>

URL: This is the target of your link
CAPTION: Giving a title is always a good idea (but it is optional)
WIDTH: The width of the shadowbox window
HEIGHT: The height of the shadowbox window
SET: If you like to show media in a set where the user can step from one media to the next, you have to give the links all the same SET string. You only need to define it when you want to show a set.

So, the easiest way of adding a link to an image or external page would be:

<a href="URL" title="CAPTION" rel="shadowbox">HTML</a>

Note that setting WIDTH and HEIGHT values are fully optional when using images or external pages. You only need to define them if:

a) you want to define the dimension of the shadowbox window for external pages
b) you load movies (e.g. flv, quicktime, …) into shadowbox

Loading an external page
<a href="http://www.google.com" title="Google Main Page" rel="shadowbox">Search Google</a>

Loading a QuickTime Movie you added to the page assets in RapidWeaver
<a href="assets/mymovie.mov" rel="shadowbox; width=480;height=270" title="play">play quicktime movie »</a>

Loading an Image you added to the page assets in RapidWeaver
<a href="assets/myimage.jpg" rel="shadowbox" title="Show fullsize image">Show the fullsize image</a>

Loading a Flash Animation you added to the page assets in RapidWeaver
<a href="assets/myflashanimation.swf" rel="shadowbox;width=550;height=410" title="flash animation">play flash animation »</a>

You proably are asking: where in the hell do I add the code above. Well, if you are working with HTML pages, you simply can add it there. But most of us use other Page Templates (e.g. Styled Text, Collage, …). In that case you use the Add Link tool in RapidWeaver.

The Add Link window in RapidWeaver can be used to enter the needed information to load a content in a shadowbox layer. You will find an Add Link button in many RapidWeaver Page Templates (as far as I know for all styled text entries). To bring up the Add Link window, you have to first mark the text or image you want to be a link and press the Add Link button afterward.

1) Choose from the drop-down menu if you want to load an external website (URL) or an internal page or asset
2) If you have chosen URL in the first step to load an external page, type the URL to that page in this text field
3) To use shadowbox you have to use the entry "Current Window"
4) Give the link a nice description. This step is optional but should be set for accessability and SEO reasons
5) As the Add Link window changed in RW4 you have to click on the add attribute button to create the rel attribute
6) In the name column of the new created attribute, type "rel"
7) In the value column you have to type in the shadowbox code, which was described in the steps "Showing Media" above.
If you have added all needed input, click on the Set Link button