Thursday, 02 July 2009 22:36

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="http://site.com" 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="http://site.com" 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".

Last Updated on Thursday, 02 July 2009 22:51
 
Comments (2)
1 Monday, 12 August 2013 03:23
KevinTran
Nice post
2 Monday, 12 August 2013 03:24
Jack Anderson
Hi, this is a very interesting article and I have enjoyed read­ing many of the arti­cles and posts con­tained on the web­site, keep up the good work and hope to read some more inter­est­ing con­tent in the future. I got a lot of useful and significant information. Thank you so much.

Add your comment

Your name:
Comment:
  The word for verification. Lowercase letters only with no spaces.
Word verification:

The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries. Jeff Channell is not affiliated with or endorsed by Open Source Matters or the Joomla!® Project.

Santorum
Joomla Extensions