Back to Top

Find out how to implement cool Slimbox-style videos and web pages into your Joomla! website using Mootools! We've created an easy to follow tutorial that will get you up-and-running in no time at all.

The following tutorial describes how to implement the excellent MediaBox into any Joomla! 1.0 template. From the official website:

"Using the MooTools javascript library, Mediabox lets you open flash, video, and html content in a floating “lightbox” style window.".

The process is very simple and involves uploading a handful of files to your template folder, and making a couple of easy edits in your index.php file.

First, some credits for those people who have worked hard to make this script work:

http://iaian7.com/webcode/Mediabox - official Mediabox website
http://blog.deconcept.com/swfobject - SWFobject, used to play video in the Mediabox
http://www.jeroenwijering.com/?item=JW_Media_Player - JW Media Player, for playing media files in Mediabox

Please respect the relevant licenses when using & distributing this code.

Right, let's get started!

1. Download the Mediabox package file - this contains all of the elements above needed for the implementation.
2. Unzip the package to your local machine.
3. Connect to your website via FTP, and browse to your default template folder.
4. Upload the extracted mediabox folder to the root level of the template's folder (not just the contents - you need the folder too!).
5. You now need to edit your template's index.php file; so download it and open with an HTML editor, or edit directly in Joomla! using the Edit HTML feature in Template Manager.
6. Add the following lines of code directly above the </head> tag:

<link href="<?php
echo $mosConfig_live_site;?>/templates/<?php echo
$mainframe->getTemplate(); ?>/mediabox/mediabox.css"
rel="stylesheet" type="text/css"/>
 
<script src="<?php echo
$mosConfig_live_site;?>/templates/<?php echo
$mainframe->getTemplate(); ?>/mediabox/mootools.v1.11.js"
type="text/javascript"></script>
 
<script src="<?php echo
$mosConfig_live_site;?>/templates/<?php echo
$mainframe->getTemplate(); ?>/mediabox/swfobject.js"
type="text/javascript"></script>
 
<script src="<?php echo
$mosConfig_live_site;?>/templates/<?php echo
$mainframe->getTemplate(); ?>/mediabox/mediabox.js"
type="text/javascript"></script></span>

This will make the template load the required scripts.

7. Save the HTML (and upload if necessary), and you're done!

To use Mediabox, implement your content links as described on the Mediabox website.

Any objects you wish to open in Mediabox, simply add rel="mediabox[width height]" within the <a> tag. Simple!

Issues/Problems

You may encounter issues if your template is already using mootools-based extensions. The flash-based JPG image rotator from Joomlashack also causes script problems in IE6; we've had to disable ours on this very site for this reason.

Further known issues are posted on the Mediabox website.