The Art of Joomla: tutorials for Joomla developers, site implementers and artisans.

Artisan: a skilled worker who practices some trade or handicraft.

Written and maintained by Andrew Eddie - Joomla master developer.

Following on twitter?

@theArtOfJoomla

@AndrewEddie

Hosted by

Powered by

Comments

Labels

Magazine

Thanks to

Permalinks

the Art of Joomla / Issue 2

Issue 2

the Art of Joomla - Web Master Moments

Perfect Popups

Written by Andrew Eddie

Labels: Special Effects

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 1.5 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 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.

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.

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.

34 Votes

14 Comments

Feed

Monjur Ahmed makes this comment

Monday, 08 June 2009

Excellent piece of information. It just worked for me like a charm. Thanks for sharing.
Dan Walker makes this comment

Monday, 30 March 2009

How would you make a popup to show a swf file? I'm not having any success.
hnj makes this comment

Tuesday, 17 March 2009

How to define the height and width?
Den makes this comment

Monday, 16 March 2009

is this javascript popup or "modal"? How to make same popup for Joomla 1.0.x? I do not need Lightbox/Slimbox/Graybox/etc, I need normal javascript popup.
Peter makes this comment

Thursday, 12 March 2009

Excellent! Thanks for sharing. You just made my life a lot easier. Followed your instruction to the letter and everything worked as described.
Davor makes this comment

Wednesday, 11 March 2009

Thank You so much - for this: !! I did not know this.
François Greze makes this comment

Monday, 19 January 2009

Hi , thx for sharing your knowledge on joomla ( sound like you know that kind of "tricks" whose save you a lot time :). I use behavoir with cakephp before , but my quesiton is about the output content inside the modal windows. My link work perfectly but (even with a special template , made just for displaying this article) as you can imagine , the all site commes up into the modal windows... Do you know how I can avoide this , and only get the content of the article ? Anyway thx again for you time ... Chears from Paris , france PS: sorry for my poor english ^^
exsina makes this comment

Saturday, 17 January 2009

I am using this technique on normal href links, not images. How do I get the pop up to size according to the content?
jcyphert makes this comment

Friday, 09 January 2009

Thanks so much! I looked everywhere for some sort of flash thing for this. the funny part is, the Backend already had it... enough to make one crazy!
Andrew Eddie makes this comment

Friday, 09 January 2009

Because it's PHP it doesn't matter where it is placed. It gets executed before Joomla renders any of the HTML.
Mike makes this comment

Friday, 09 January 2009

Are you sure you mean "before the DOCTYPE"? wouldn't it be after?
jk makes this comment

Wednesday, 08 October 2008

thanks for this!!
Rick makes this comment

Friday, 04 April 2008

I got this to work. How do you get the original size image (big picture)to pop up?
Rick makes this comment

Thursday, 03 April 2008

Can you explain this in newbie terms. I am using Joomla 1.5 & TinyMCE editor