Using the Joomla Lightbox

Posted in Joomla!
2009-07-03 03:36:11 +0000 UTC

Displaying content in a lightbox in Joomla is pretty simple. All it takes is a minor template tweak and a few parameters for each affected link.

The first step is to tell Joomla to load everything that's needed for the lightbox. To do this, add the following line to the <head> section of your template:

<?php JHTML::_('behavior.modal'); ?>

Once that's done, it's possible to make any link inside your content a modal by giving it the class "modal". How you do this depends on your editor, but the resulting code should be as follows:

<a href="" class="modal">Link Contents</a>

Now, this is great for loading the modal window with default settings, but if you're linking to something that's not an image, Joomla will use an AJAX call to load the page directly into yours, and not preserve any scripting. To change the default behavior on a link-by-link basis, you also need to set the "rel" tag:

<a href="" class="modal" rel="{handler:'iframe', size:{ x: 600, y: 400 }}">Link Contents</a>

Again, how you set this is dependent upon your editor. My personal choice is "none".