Home Blog Web Design How to use Lightbox popup in Joomla
Please help Ukrainian armed forces! Official Fundraising

How to use Lightbox popup in Joomla

1 1 1 1 1 How to use Lightbox popup in Joomla5.00Rating 4.98 (342 Votes)

This article will show how to display lightbox popup with image, input form or any other content using Joomla 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   

 
+4 # 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.
 
 
+2 # amedeo 2014-03-01 09:42
Very good!. It works fine also with Joomla 3.2.
 

You have no rights to post comments

Saturday the 21st.