How to use Lightbox popup in Joomla

1 1 1 1 1 Rating 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>

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>

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

Source: http://dev-blog.ru/?p=154

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.

Refresh comments list
RSS feed for comments to this post

You have no rights to post comments