Studio Zeep

Using Lightbox in Joomla 2.5 Development

Sunday, 16 September 2012 17:50 Written by 
Rate this item
(3 votes)

Joomla 2.5 ships with the world-famous Javascript popup modal feature Lightbox, and using it in your Joomla 2.5 development could not be any easier.

Let's take a quick look at the steps involved to add Lightbox to your Joomla 2.5 extensions.

Adding Lightbox to Your Component's Backend Interface

This is where the ease of Joomla's development process really comes in to play. First up we need to initiate the popup window behavior. We do that by adding the following code to our view template files (administrator/components/com_<my component name>/views/<my view name>/tmpl/default.php):


The code above will tell Joomla to include the appropriate Javascript files in the head section of your component pages. Those files are mootools-more.js and modal.js. Next up we need to make a call in our HTML output to utilize the modal behavior. Anytime you want to load an image inside the Lightbox, all we have to do is add class="modal" to our image and/or text links. Here's a quick example:

<a class="modal" href="/image/path/my-image.jpg" title="Preview Image">
<img src="/images/icon-16-media.png" alt="Preview Image" />

In the above example, I am displaying a small 16x16 icon that, when clicked, will display my item's image in a Lightbox popup window. This icon/link combination is of course repeated for each of my component's items listed in my list view.

When you want to display only a single image in our Lightbox popup, Joomla will perfectly automatically resize the Lightbox to fit the image dimensions.

When you want to display content in our Lightbox popup, you will have to include a few extra bits of information:

<a class="modal" href="/component/mycomponent/?view=myview&layout=mylayout&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 400}}" title="Display Definitions">
This is a link to display content

We are still calling our required class="modal" but this time we have to add in code to tell Joomla how big to make our Lightbox popup window. We do this by adding in the rel values to our link tag. The "x: 600" and "y: 400" values will be the width and height dimensions (in pixels) of the Lightbox popup.

Adding Lightbox to Your Component's Frontend Views

Lightbox in the your frontend views are the same process. Initiate the modal behavior in your view's template file (components/com_<my component name>/views/<my view name>/tmpl/default.php). Then make the calls to Lightbox using the class="modal" for your links.

Quicker Alternatives for the Frontend

Doing multiple Lightboxes in the frontend displaying content can be a bit of a hassle including the rel="{handler: 'iframe', size: {x: 600, y: 400}}" requirements each time. Thankfully, the fine folks that develop the famous JCE (Joomla Content Editor) have also developed a plugin called JCE MediaBox which will tackle a lot of the "extra" code you would have to add to your links. JCE MediaBox can be installed along side the JCE Editor component, or as a separate stand-alone plugin.

After you have JCE MediaBox installed and configured, a simple addition to your link tags is all you need to initiate Lightbox.


This will work on images and text links in the frontend.

Wrapping Up

As you've seen above, adding Lightbox to your component's backend and frontend views is a rather simple task, especially if you're just displaying a single image in the popup. Feel free to share any feedback!

Read 35077 times Last modified on Friday, 08 February 2013 18:16
Justin Herrin

Justin has been working in the web-based industry for over ten years with a primary focus on open source technology, web standards and mobile development.