Using Mediabox (POP and Sphere Theme only - so far)
This document explains how to use the included Mediabox support of Rapid Ideas Themes. At the moment only the POP theme does use it, but I will probably include it in other themes too. There are different ways on "bringing up" a mediabox layer in RapidWeaver. In the following sections I am going to describe how you use the mediabox scripts in your site.
What is Mediabox
Mediabox 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. Mediabox is very flexible, as it not only lets you open images but many different file formats, mainly video, flash and also webpages.
The Home of Mediabox
If you want to find out more about Mediabox, please visit the project home page at: http://iaian7.com/webcode/Mediabox
You will find many information on how to use Mediabox and also some great examples. I won't describe all possibilities here, so check out the project page!
Showing Media
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="mediabox[WIDTH HEIGH]>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 mediabox window
HEIGHT: The height of the mediabox window
Loading an external page
<a href="http://www.google.com" title="Google Main Page" rel="mediabox[600 400]">Search Google</a>
Loading a QuickTime Movie you added to the page assets in RapidWeaver
<a href="assets/mymovie.mov" rel="mediabox[480 270]" title="play">play quicktime movie »</a>
Loading an Image you added to the page assets in RapidWeaver
<a href="assets/myimage.jpg" rel="mediabox[640 480]" 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="mediabox[550 410]" title="flash animation">play flash animation »</a>
Loading a YouTube Video
<a href="http://www.youtube.com/watch?v=l9MdgSUpG5U" rel="mediabox[480 380]" title="www.youtube.com">play YouTube »</a>
Loading a Flickr Video
<a href="http://www.flickr.com/photos/bhl1/2402027765/in/pool-video"rel="mediabox[400 300]" title="flickr.com">play Flickr video »</a>
Using Mediabox with RapidWeaver
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.
Mediabox and the "Add Link" window in RapidWeaver
The Add Link window in RapidWeaver can be used to enter the needed information to load a content in a mediabox 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.
Inserting the values in the Add Link window
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 mediabox 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 mediabox code, which was described in the steps "Showing Media" above.
8) If you have added all needed input, click on the Set Link button
Mediabox, Firefox2 and Flash Slideshow
There seems to be a problem with Firefox2 and flash slideshows in a mediabox layer: The slideshow will not be shown! Note that this is a bug in Firefox and not in mediabox (or my theme). The FF staff has corrected this in Firefox 3.
The easiest thing to make flash slideshows work with mediabox and FF2 is by using the great and free RapidAlbum plugin. Just use the Slideshow template and - as far as I have tested - this fixes the FF2 bug (well, not exactly the bug in FF but it outputs other code, so the bug will not be triggered).
For more information about the plugin or to download it, please visit the following site:
Pros and Cons of Mediabox compared with Greybox
Pros:
- Much easier to handle
- You can load videos as page assets and don't have to create a dummy HTML page for it
- Handles much more media formats
- Looks better (in my opinion)
Cons:
- You can't add sets (image sets, webpage sets)
- You need to define a dimension. A simple "Fullscreen" option does not exist
- The window will not be perfectly centered vertically (if you care)
What about FLV support
FLV support has been added to the latest theme versions (POP: 1.0.1). So make sure you check it out!