Using the Joomla Lightbox
Joomla uses a MooTools lightbox in the administrative backend, called SqueezeBox. By default, SqueezeBox is not available to frontend sections, categories, and articles. It is a relatively simple matter to include squeezebox onto the frontend and improve your visitors’ experiences.
It is not required to understand what MooTools and Squeezebox are nor how they work in order to successfully create a wonderful lightbox effect. A lightbox may be used to display a large picture from a thumbnail or any link. Additionally, any web page may be displayed within the lightbox (a great way to display a map or directions).
This article has three parts:
- Template setup (not required for GGIS clients)
- Using SqueezeBox
Update:
See comment #6 and #7 for a patch to modal.js that makes this work for multiple images on the same page. Without the patch clicking on the next image displays the first image in the lightbox.
Joomla template setup
The easiest setup is to include the following code in your site’s main template. This makes SqueezeBox available to all pages based on the template.
Include this code within the <head></head> but after the <jdoc:include type=”head” /> tag.
<script type="text/javascript" src="<?php echo $this->baseurl ?>/media/system/js/modal.js"> </script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/media/system/css/modal.css" type="text/css" />
<script type="text/javascript">
// <!--
window.addEvent('domready', function(){ var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: 'false'}); });
// -->
</script>
<script type="text/javascript">
// <!--
window.addEvent('domready', function() {
SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
// -->
</script>
Using SqueezeBox
Basically, you are creating a link and the link opens the lightbox content. A link may be created around a thumbnail image or text. For an image, the lightbox is automatically sized . Here are the steps:
- Open your selected content for editing in Joomla.
- If you are using the WYSIWYG editor, then click the ‘Edit HTML content’ icon.
- In the HTML modal box, locate where you would like to insert the link for SqueezeBox. Let’s call this LINKTEXT.
Displaying an image
Surround your LINKTEXT with the following anchor tag.
<a rel="SqueezeBox" href="LOCATION" title="CAPTION" class="modal"> LINKTEXT </a>
Replace LOCATION with an absolute or relative URL to your image. Replace CAPTION with a caption for your image. Remember, LINKTEXT may be text or a thumbnailed image tag.
Displaying a web page
Surround your LINKTEXT with the following anchor tag.
<a rel="{handler: 'iframe', size: {x: WIDTH, y: HEIGHT}}" href="LOCATION" class="modal">
LINKTEXT
</a>
Replace WIDTH and HEIGHT with your chosen width and height of the lightbox. Replace LOCATION with an absolute or relative URL to web page you would like to display. This is an excellent way to display a Google map to your desired address.
Save your changes
Update your HTML and then save your changes. Finally, test your results.
February 20th, 2009 at 12:32 am
[...] 1.5’s use of Squeezebox in the backend makes for easy use in the frontend. Thanks to this article at Dvector.com I was able to mash up a lightbox style feedback form for category listing in sobi [...]
March 19th, 2009 at 3:40 pm
Hi … thanks for the tip, i had a bug with an external lightbox script included in a template.
Do you know how to show the title of the picture ?
Thx
JLV
March 23rd, 2009 at 7:44 am
@JLV
Display of the CAPTION would be controlled by the style sheet. I’ll dig and see if I can give you more specifics.
June 7th, 2009 at 11:13 am
Hi, this it’s great for me, thanks for the resource.
Nacho
June 16th, 2009 at 7:21 pm
This is working great, except all of my links that I’m using this on open up the same image.
Well actually, they open up the first image I click on.
I have to links on a page…each to separate images to open with the SqueezBox, if I click on one and open it up, it works great. If I click on the other, it open up the first image again.
What am i doing wrong?
June 16th, 2009 at 8:58 pm
@ Anon
Yeah, that is due to the version of Squeezebox included with Joomla. Unfortunately, you cannot upgrade the version as it requires a Mootools incompatible with Joomla.
Make these changes and it will work as you expect. Edit the file:
/media/system/js/modal.js
After line #162 this.trashImage();
add this this.trashUrl();
Then after the trashImage function at line #178, add the following function:
trashUrl: function(){
if (this.url) this.url = null;
},
June 16th, 2009 at 9:10 pm
Patch for /media/system/js/modal.js to make it properly display consecutive images from the same page.
162a163,164
> // ADDED BY GARY
> this.trashUrl();
177a180,184
> },
>
> // ADDED BY GARY
> trashUrl: function(){
> if (this.url) this.url = null;
July 16th, 2009 at 5:38 pm
Hi one1 – I have done as you say in comments 6 and 7, but to no avail. It works still for the first image that i click on, but if I escape and click on a second image, it shows nothing at all now, just greys out the screen.
What do the numbers mean? 177a180,184?
July 16th, 2009 at 5:44 pm
Okay, nevermind, I tried it again, and it’s working fine.
July 22nd, 2009 at 11:33 pm
@ Randy
Glad it worked out for you. The numbers 177a180,184 are used to aid working with patch files.
July 23rd, 2009 at 3:54 pm
Lightbox links in Joomla Content!…
I happen to really like lightbox for presentation and use it for images on a couple sites right now – but I wanted to add a lightbox effect for an order form on CTAI found the solution for adding lightbox links here.http://dvector.com/oracle/2009/02/05…
July 28th, 2009 at 5:41 am
I have been looking for this funtionality for quite a few days, I knew the functionality was in the backend but didn’t know how to use it, great article, v.simple to follow, well done and thanks
September 1st, 2009 at 9:55 am
I have not tried it yet, but I’m sure it’s just what I’m looking for.
Thank you very much.
September 30th, 2009 at 9:18 am
Is there any way one could popup a module or content inside the lightbox? The problem for me is, that I wish to show custom module inside lightbox… so I figured I will just show some content with {loadposition xxx} but the content pops up with the design included… I need only content or module inside lightbox…
Any ideas on how to achieve this?
Thnks in advance.
September 30th, 2009 at 11:31 am
@ortiizz Interesting question. This is a rather complex action that would require its own module or plugin. I suggest first looking at http://extensions.joomla.org to see if something already does this. Otherwise you might have to write your own.
There is probably a cheap trick for content though.
1. Create a new template that has no formatting other than the content
2. Create a hidden menu with links to the content you wish to display
3. Apply your new template to this menu
4. Use the menu links as the URLs for your lightbox
This is not something I have tested but I have used this trick for other reasons. Good luck.
December 7th, 2009 at 12:37 pm
Thanks for the article its really good, when I am creating the HTML by using Javascript I am trying to add the same class modal with the rel as mentioned above, the lightbox doesnt work for me it opens the same page on the same parent window,
It works good when I do the same with simple html and not generating the html by js.
This is some of the code,
var newdiv = document.createElement(‘div’);
newdiv.innerHTML = “Vish test Select “;
Any ideas if I can make the lightbox work using js to create the html tag.
Thanks …
December 13th, 2009 at 3:50 pm
@Vishal
It really should not matter how your HTML is generated. Have you verified your resulting HTML source?
I’m not sure I understand your use case. Perhaps, the DOM structure should be checked to make certain you are using the correct references. (I have not tried what you are asking, so I may be missing something.)
January 2nd, 2010 at 6:41 pm
Thanks, very good tip. After messing with all of the inadequate “plugins” this proved to be great.
January 9th, 2010 at 10:39 am
Hello and thanx for this site! It solved my problem with a lightbox that works with my slideshow and I’m so happy!
But – I have 10 images on the same page, and the lightbox only showed the first image I clicked on, as someone else wrote. So I tried to solve it with your functions on line 162 and 178 – but it doesn’t work
The images open in a new window, without the lightbox and my slideshow has disappeared. What did I do wrong…?
I’m new to java so I feel a bit lost, and like an idiot… These numbers that were written, 162a163,164, should a copy them aswell…?
January 9th, 2010 at 10:45 am
Hm… I fixed it, or the site reloaded or something… But now it works!
Great article and lightbox! Thanx!
January 16th, 2010 at 3:00 pm
Really thanks for this article, i am going to use it for a feedback form.
February 21st, 2010 at 6:28 pm
Hi
I have display a number of maps for exhibitor locations, and this is certainly a nice way of displaying them. I have the Google Maps working, and I have the modal frame working, now, would someone please tell me how to get the maps into the frames.
This is probably a stupid request but I have searched for hours finding this solution and I would like to get it implemented quickly.
Thanks
Charles
February 22nd, 2010 at 8:00 am
@Charles Coe
Presuming everything is working, which I believe your message states. Displaying a map should be as easy as
<a rel="{handler: ‘iframe’, size: {x: WIDTH, y: HEIGHT}}" href="LOCATION" class="modal">
LINKTEXT
</a>
You just need to supply the values of WIDTH, HEIGHT, LOCATION, and LINKTEXT. With LOCATION being the Google Map URL.
February 22nd, 2010 at 11:15 am
Thank you for the quick response. All is solved!!!
Charles
March 10th, 2010 at 7:04 am
thanks for great tip. that can be used and i am sure very useful for all joomla users.
May 11th, 2010 at 3:04 am
hello and thanks for the super nice tip!
everyhting is working fine exept the issue with the photos….
i saw the patch for the modal.js
i copied the code of your first comment (June 16th, 2009 at 8:58 pm)
but where should i paste the rest of the code? …
(162a163,164
> // ADDED BY GARY
> this.trashUrl();
177a180,184
> },
>
> // ADDED BY GARY
> trashUrl: function(){
> if (this.url) this.url = null;)
sorry but i’m newbie with js..
thanks!
May 11th, 2010 at 11:15 am
@tizfo
Make these changes and it will work as you expect. Edit the file:
/media/system/js/modal.js
After line #162 this.trashImage();
add the function call
this.trashUrl();
Then after the trashImage function at line #178, add the following function:
trashUrl: function(){
if (this.url) this.url = null;
}
June 2nd, 2010 at 5:32 pm
Hi, I am kinda new to Joomla. Can someone please tell me which file I will need to modify to make this work. Based on the instructions I still can’t figure out which file it is.
Thanks.
June 3rd, 2010 at 1:49 pm
@Scotty
The template file MUST be modified to include the code shown under JOOMLA TEMPLATE SETUP. This file is name index.php and located at /template/TemplateName/. For more about templates, visit http://docs.joomla.org/Joomla_1.5_Template_Tutorial
If you are asking about the modal.js patch, the file is:
/media/system/js/modal.js
July 25th, 2010 at 2:12 am
Thanks a lot for this, it’s really helpfull!
July 28th, 2010 at 4:44 am
Hi,
I am using this SqueezeBox hack as an iframe for viewing pages, but the problem i have is that i cannot show a loading indicator for users with slow connections – do you know how i can achieve this?
Thanks.
July 28th, 2010 at 6:35 am
@Q_the_novice
Found the hack.
/media/system/cssmodal.css /* line 75 */
Replace
.sbox-content-image#sbox-content{
overflow: visible;
}
With
.sbox-content-iframe#sbox-content{
overflow: visible;
background-image: url(../images/spinner.gif);
background-repeat: no-repeat;
background-position: center;
}
July 28th, 2010 at 3:56 pm
@Q_the_novice
Good find. Not so much a novice after all?
August 20th, 2010 at 12:16 am
What’s happening with my installation of this (on the bio page of the http://www.rodeiro-art.com website) is that in IE, the images get reduced for some reason and it distorts the text written on fireworks. It looks fine in both FF and Chrome.
August 24th, 2010 at 5:22 pm
@marico
Which version of IE. I viewed the site in IE7 and IE8 without any image distortions. IE6 is poorly behaved.
August 30th, 2010 at 1:25 pm
Would love to implement this, but the JS is failing. I’m getting an error that says “el.set is not a function” (coming from mootools.js).
I’m linking to another Joomla page, here’s the html for that link:
sizing is unisex
Thoughts?
August 30th, 2010 at 3:45 pm
@Kathy Keating
Not finding a valid page at:
http://www.tricalyx.com/unisex-sizing-chart?tmpl=component
Guessing this is not really your link but as modified by WP Comments.
But besides that, the link is not correct to make a call to the lightbox. It should be of the format:
<a rel="{handler: ‘iframe’, size: {x: WIDTH, y: HEIGHT}}" href="LOCATION" class="modal">LINKTEXT</a>