Today I have been dealing with an infuriating problem concerning joomla lightboxes. Opening them seems to be a little more situation specific than I thought!

Normally you just ensure that you are using the Joomla modal behavior by including this at the start of your php page:


This will work fine with normal <a> tags with their class set to modal. But for reason’s i’m not quite sure of when you generate the <a> tag using HTML (if you are creating a table of links from an AJAX request for example) it seems not to work, even though the link generated is syntactically correct:

<a class="modal" href="http://your/link/here" rel="{handler: 'iframe', size: {x:700, y:555}}">Test</a>

The way around this is to use the Javascript methods that control the lightboxes for joomla, so set the href of your link to be # or javascript:void(0). Then we need to use the onclick event of the <a> tag, set it to call the following function:

onclick="SqueezeBox.fromElement('http://your/link/here', {size:{x:700,y:555}, handler:'iframe'});"

This will call the exact same process as a normal <a class="modal"> tag would. But this will work in all situations. I couldn’t find any documentation on this, so I hope this post helps a few people.