Open an image in a Lightbox


In Joomla there is a simple way to do that. please follows below steps

First of all you need to include the following in the php code for your extension or template:

1.Add following line to your extension or template’s index.php file.

JHTML::_('behavior.modal');

then save the file.

2. Now open joomla backend and select the article. Then add the class “modal” to <a> tag
for example i have put the following code.

<a class="modal" href="images/powered_by.png"><img class="caption" src="images/powered_by.png" border="0" alt="" title="Joomla" align="left" /></a>

3. that’s it, refresh the frontend site and click on content image it will open in lightbox.

joomla popup window
joomla popup window

We can also load an existing html element from a page, using the element id, for example suppose your page contains some html such as the following:-

<div id="popupDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Then create the link to that id

<a href="#popupDiv"
class="modal">Click here to load the paragraph in a light box popup window</a>
Advertisements

6 thoughts on “Open an image in a Lightbox”

    1. This method is working in all browsers. May I know what code you have used ?

      1. hi, there was a conflict with another plugin and the z-index attribute…

      2. please visit this link click here to remove conflicts between mootools and jquery. I am sure this will helpful for you to resolve the problem.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s