This document explains how to use the included Mediabox Advanced support of Rapid Ideas Themes. At the moment the latest versions (private beta at the moment) of Diamond, POP, Sphere and Konzern theme has included this framework. 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 Advanced
Mediabox Advanced is a new version of the old mediabox framework. It is a 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 Advanced
If you want to find out more about Mediabox, please visit the project home page at: http://iaian7.com/webcode/mediaboxAdvanced
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=”lightbox[SET 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)
SET: If you want a mediaset (gallery) be shown in mediabox advanced with next/previous links you have to give them the same name here (optional)
WIDTH: The width of the mediabox window (optional)
HEIGHT: The height of the mediabox window (optional)
Note that you need to set a value for “SET” if you want to also define WIDTH and HEIGHT. So said: SET isn’t optional if you use WIDTH and HEIGHT
Loading an external page
<a href=”http://www.google.com” title=”Google Main Page” rel=”lightbox[]“>Search Google</a>
Loading a QuickTime Movie you added to the page assets in RapidWeaver
<a href=”assets/mymovie.mov” rel=”lightbox[]” title=”play”>play quicktime movie »</a>
Loading an Image you added to the page assets in RapidWeaver
<a href=”assets/myimage.jpg” rel=”lightbox[]” 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=”lightbox[]” title=”flash animation”>play flash animation »</a>
Loading a YouTube Video
<a href=”http://www.youtube.com/watch?v=l9MdgSUpG5U” rel=”lightbox[]” title=”www.youtube.com”>play YouTube »</a>
Loading a Flickr Video
<a href=”http://www.flickr.com/photos/bhl1/2402027765/in/pool-video”rel=”lightbox[]” title=”flickr.com”>play Flickr video »</a>
Loading an Image Set (Gallery)
<a href=”assets/myimage01.jpg” rel=”lightbox[imageSet1]” title=”Show fullsize image 1″>Show the fullsize image 1</a>
<a href=”assets/myimage02.jpg” rel=”lightbox[imageSet1]” title=”Show fullsize image 2″>Show the fullsize image 2</a>
<a href=”assets/myimage03.jpg” rel=”lightbox[imageSet1]” title=”Show fullsize image 3″>Show the fullsize image 3</a>
Note that you can also add other galleries than image galleries (e.g. movie galleries).
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 uncheck the entry “Open in New 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.
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:
DBM
Richardet Design
Studio Share
Chris, I’m using the new Beta version of Diamond, Accordion 1.5 and PlusKit 1.70b4 (all up-to-date) – but I still can’t get the accordion to close up. You can see the page here: .
The only modification that I made to the index.html file was to move the user-header to the breadcrumb area.
I’ve also posted to the RW forum – it can be found here: http://www.realmacsoftware.com/forums/index.php/forums/viewthread/22618/P60/
Thanks in advance for any suggestions!
Best,
Dave
Well, it seems the Accordion update to V 1.5.1 changed it: in V 1.5 it worked perfectly. I’ll look into this.
Hi Chris,
I decided to experiment with the mediabox on the Sphere 4.3 theme – since I was curious how it worked, and have some ideas for it – but I have spent too much time making no progress. Here is what I have done: – Installed the snippet for the script to be installed between the header tags. – Dragged the mediabox folder into the assets pane. – pasted various combinations of URLS into the add text link box. It is here I think I am making a mistake.
My confusion begins with what script goes where.
The youTube video I want to add is one I did of Boulder’s Thursday night bike club.
http://www.youtube.com/watch?v=-PYYRR78xGY
According to your instructions above, I need to do something like this – but do I put that ONLY in the ‘rel’ spot? If so, what, if anything, goes in the URL spot?
Boulder Thursday night bike club
Lastly, once I do get the right combination, can i test the mediabox on my machine or must I upload first and try via the web?
Thanks for steering me in the right direction..Jonathan
a href=”http://www.youtube.com/watch?v=-PYYRR78xGY” title=”Boulder Thursday night bike ride” rel=”mediabox[500 405]>Boulder Thursday night bike club
(I know, I took the tags off, so you could see what I thought should go in the ‘rel’ space)
Hi Jonathan
Actually the sphere theme already has mediabox included which means you don’t need to add anything to it. All you have to do is create the proper link so mediabox will load. It is documented in the mediabox manual (can be found on this site):
http://www.rapid-ideas.com/wordpress/general-section/using-mediabox/
Also note that if you are testing the latest beta of sphere, you have to use the mediabox advanced handling as I upgraded the theme to mootools 1.2.3 and so also to mediabox advanced. More information about mediabox advanced can also be found on this site here:
http://www.rapid-ideas.com/wordpress/general-section/using-mediabox-advanced/
I got it to work, thanks, Jonathan
Christoph – I’m using the new version of Drawer theme and want to include some mp3 files with mediabox advanced. When I add as mp3 they don’t work – if I save as quicktime files they do work but then I get audio playing in a big floating box rather than a nice thin one.
Any ideas ?
mp3 support isn’t included yet in mediaboxAdvanced 1.1.6. John just released V 1.1.7 that should support mp3 files but, well, it’s too late now. I’ll integrate this in the next Drawer update.
You should be able to set the dimensions of the mediabox window using some code in the rel attribute:
rel="lightbox[song 360 20]"Chris
Christoph,
1/ Can’t I add Mediabox advanced to Camilo?
2/ If so, how do you make it flexible?
I’m looking for advice on how to build a series of slides with photos and text to be viewed in MediaBox Advanced. Would a PDF linked asset work in MediaBox Advance?
I’m working in RapidWeaver with the D-Scribe theme, which includes MediaBox Advance. I want my thumbnail images to bring up a gallery of 800 x 450 pixel slides. Each slide would contain an image, headline and a paragraph of body copy. My first experiment was to link to a Stacks page, but it brings up the enitre web page (theme and all). I don’t want to just show slides of photos without copy. I would love to have the copy SEO friendly for each of the series of slides.
Is this possible, or do you have another solution to recommend?
Thanks,
Chris
If you link to a page with mediabox it will bring up the full page. So you have to link to an image instead. The easiest way would be to add your images to the page assets and set up the link so it uses the asset image as the target. This should work.
As far as I know, mediabox adv. can’t display PDF files.