Issue 2

the Art of Joomla - Web Master Moments

Perfect Popups

The first thing to do is place the following line of code in your template index.php file:

This should be placed near the top before the html parts of your template start. That's all you need from the programming point of view.

To activate modal popups, ensure this line is placed near the top of your template index.php file, before the DOCTYPE tag:

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

Then just put a link in your content like this:

<a class="modal" href="images/stories/big_picture.jpg">
    <img src="images/stories/thumb_picture.jpg" border="0" alt="A picture" /></a>

You only have to remember three things.

1. Put your thumb size image in a link.
2. Point the link href to your full sized image.
3. Include a class of modal in the link tag.

The screenshot to the right uses this technique.

Next time I'll show you how to use a different popup called Slimbox. It's a bit fancier, will support a gallery and is actually lighter on resources.

How it Works

The modal behaviour is a javascript routine that searches through all the output of the page and searches for any link that has the modal class. It then attaches a behaviour to the link that creates the popup window to the image referred to in the link. This technique is called applying "unobtrusive javascript". The huge advantage of this is it degrades well if javascript is not present. By this we mean, if you browser does not support javascript (like in some phones, WAP devices, etc) you still have valid HTML markup that a user can use. The user will still see the thumbnail picture and this will link to the larger image. Whether it's too big for their screen is another matter – but at least they can still see the information.