Popup images are a very popular part of web-sites today. You see them used particularly in galleries but more and more within articles in general. Joomla gives you the ability to add popup images very easily.
The first thing to do is place the following line of code in your template
<?php JHTML::_( 'behavior.modal' ); ?>
This should be placed near the top before the html parts of your template start (just after the
defined('_JEXEC') or die; line will be fine). That’s all you need from the programming point of view.
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>
The important bit is the
That’s pretty easy! You only have to remember three things.
- Put your thumb size image in a link.
- Point the link href to your full sized image.
- Include a class of modal in the link tag.
Rather than using a thumbnail, you can use the full size image but scale it down in the image tag. The advantage is that your popup will display very quickly. The disadvantage is that the page will take longer to finish loading.
How it Works