We've received some inquiries asking about the best ways to embed videos into Joomla content. This isn't always a straightforward, easy thing to do, especially considering all of the different types of media that people end up working with these days. Most folks settle on using some component or another to embed media. There are a number of good extensions available, and the one we're looking at handles video, audio and images.
What is it? – A Mootools powered Javascript slideshow plugin, which gives you the ability to use the effect in articles or modules.
Who makes it? – RocketTheme, the wildly popular template and extension company.
The big benefit of using this extension is that it provides a really easy way for you to display media in a pop-up window called a lightbox. In fact, the code is based on the original LightBox component.
The different types of media that RokBox is compatible with include videos, images, audio files and PDFs. You can even display web pages with RokBox. There is a listing of file types at the website.
http://www.rockettheme.com/extensions-joomla/rokbox
When you're done checking out the specs, click the download button at top and grab your files. If you're using 1.5, download both the system and content plugins. From there it's a standard Joomla plugin install. Make sure they are enabled.
Once you have the code installed and enabled, you're left with an easy to use media display option. Just insert one line of code into an article and your images are displayed in a nice, customizable popup window. No messing about with embed code that might get stripped when saving.
These are the very basic parameters you have to work with:
The code looks like this when entered into an article:
{rokbox}images/test_image.jpg{/rokbox}
And this is what you get for your trouble:
You can even see the thumbnail that was automatically created peeking out from the top behind the popup window.
If we change one simple setting in the system plugin parameters we can change the look and feel pretty dramatically. We'll set the preset theme to dark, and we have this:
Another nice way that RocketTheme has extended this lightbox component is to allow you to display multiple related items by using an album. There are other methods of using simple image gallery albums, but it's nice to have the option for this lightbox.
You can also add optional captions to your code. This can serve either as a text link if you don't want to use a thumbnail or it can help with troubleshooting...see below.
As you saw above, two "themes" are included, a light one and a dark one. You also have the option of creating your own theme, if you have those skills, which is great for customizing the look and feel.
You even have control over the function of the popup behavior. Four customizable transitions are at your fingertips, they include: Fade, QuickSilver, Growl and Explode.
This isn't just an image displayer, it also handles video very well, even video providers like Youtube. And it does sound too! Did we mention that it's FREE?
Our verdict
It's a great component, especially seeing that it's free. If you play with it and get creative, you can do some interesting things without too much hassle. You do have to do your best to understand the syntax well, and make sure you aren't having any conflicts with other modules or plugins.
Overcoming hurdles
Here are a couple of steps to try if you've attempted using this extension and are having a bit of trouble. Assuming you've placed the images test_image.jpg and test_thumbnail.jpg in the images folder of Joomla, these steps might help if you run into trouble.
If you find that you are having problems finding the links to click on for your image popups, try this syntax:
{rokbox title=|click here to test|}images/test_image.jpg{/rokbox}
That should give you a text link to click on, and you should then see the popup window with your test image. It's a lot easier to troubleshoot when you can at least get some basic functionality happening.
The other bit that might stump some people is the thumbnail function. You can also specify the thumbnail to use just to get things started if you're having trouble.
The syntax is:
{rokbox thumb=|images/test_thumbnail.jpg|}images/test_image.jpg{/rokbox}
If you've found some great ways to incorporate this extension, especially ways we haven't mentioned, let us know!
