How to use Lightbox popup in Joomla 2.5

1 1 1 1 1 How to use Lightbox popup in Joomla 2.55.00Rating 4.98 (341 Votes)

This article will show how to display lightbox popup with image, input form or any other content using Joomla 2.5 built-in functionality.

For example, you can display contacts form on it.

lightbox1

Joomla 2.5 already has built-in Lightbox functions, you can use them any time in any article or module.

If you want professional Frontend development services in PHP, Joomla, Laravel, contact us to get a quote.

First of all, insert the following code into the index.php file of your website template. You have to insert it in between the <head> and </head> tags.

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

After you enabled lightbox, you may test it. Insert the link into any content article:

<a href="/link to image" class="modal">This picture will be displayed in lightbox</a>

lightbox2

If you need to display some content, you have to specify the link as follows:

<a  href="/link to the page" class="modal" rel="{handler: 'iframe', size: {x: 600, y: 300}}">This link will open  lightbox with width 600px, height 300px</a>

lightbox3

In such a way you can show any content, by adding class=”modal” and rel="{handler: 'iframe', size: {x: 600, y: 300}}" styles.

If you need to display the output of some Joomla component, for example some article, you nave to add ?tmpl=component to the link href.

For exmaple, You can test Lightbox working on this article. Just click this link.
 
 
 

Comments   

 
+3 # Navtej Singh 2013-04-27 20:25
The way you have explained things, is amazing!

You have made things very easy even for a newbie to follow and achieve success.

Thanks, and keep up the good work!
 
 
-2 # Ospar 2013-05-30 17:06
how can i make this pop up automatically as my index page is opened ?
 
 
-2 # Super User 2013-05-30 23:08
You may try opening the link using window.onload Javascript function.
 
 
-2 # Victoria 2013-06-18 18:07
Thanks for this article, it was really easy work with lightbox in my page then of read this! :)
 
 
0 # Ankit 2013-07-19 08:23
Thnx for sharing such a valuable info...proved useful for me.. :-)
 
 
+1 # Ankit 2013-07-27 09:42
Thnx for sharing. I tried it & worked perfactly. I just wanted to know what should be done added if I want to change the background of lightbox.
 
 
0 # Huan 2013-10-25 00:21
Thank you for your tip, I found it very useful and easy.
 
 
+1 # tim 2013-10-28 04:12
Thanks for posting this article. How do you force the lightbox to expand relative to screen size?
 
 
-1 # Rod 2014-01-10 07:24
Nice one. I have been struggling all day with popup extensions that were causing jquery clashes. This solution works beautifully.
 
 
+1 # amedeo 2014-03-01 09:42
Very good!. It works fine also with Joomla 3.2.
 

You have no rights to post comments

Thursday the 23rd.