Gallery - Lightbox not working

**Tibbelit** · 09/16/2010, 12:41

Hi!

I just discovered Contao, great!

But when I created a gallery I just get the images clickable, they open in a new tab/page. No lightbox effect. I don't know what I've done wrong, the source code for a picture is like this:

Code:

<div class="image_container"> 
    [img]system/html/004-3abc785d.jpg[/img] 
  </div>

So it looks like thats right I think. I was looking at the Demo and have made the same settings (working on demo). So where can I've done wrong?

Here's the link to the page: http://tibbelit.se/Host/3SF/index.php/id-2010.html
Using version: Contao Open Source CMS 2.9.1

Thanks!

**Ben** · 09/16/2010, 20:23

In the Contao backend, go to:

Go to Themes > Edit page layouts[/*:m:3ql8u93b]
Edit the one used on your gallery page[/*:m:3ql8u93b]
Near the bottom, under MooTools templates, check on moo_mediabox or moo_slimbox[/*:m:3ql8u93b]

**Tibbelit** · 09/17/2010, 00:37

I've tried every possible combination I think. I won't work... But I can see in the source code that the javascript is included... Seems strange to me why it won't work... :/

Code:

<link rel="stylesheet" href="system/contao.css" type="text/css" media="screen" /> 
 
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css?1.7" type="text/css" media="screen" /> 
<link rel="stylesheet" href="plugins/mediabox/css/mediabox.css?1.2.0" type="text/css" media="screen" /> 
<link rel="stylesheet" href="tl_files/tinymce.css?1284539635" type="text/css" media="screen" /> 
<link rel="stylesheet" href="style.css?1284639884" type="text/css" media="all" /> 
<script type="text/javascript" src="plugins/mootools/mootools-core.js?1.2.4"></script> 
<script type="text/javascript" src="plugins/mootools/mootools-more.js?1.2.4.4"></script>

And the images should be right:

Code:

[img]system/html/001-b369cd9b.jpg[/img]

**ramjet** · 09/17/2010, 00:51

whats lb8? Try without that.

**Tibbelit** · 09/17/2010, 09:59

Originally Posted by ramjet

whats lb8? Try without that.

"lb8" is the Gallery. So when you click on a picture (it's supposed to, not working for me) you will be able to open lightboxview and browse left/right among the pictures which are in the gallery (have the lb8 tag). So I believe it's sopposed to be there =)

Source: http://www.huddletogether.com/projects/lightbox2/

So I don't believe that's te problem =(

Is the MooTool always included? even if I don't check the boxes under the layout I'm using. Because I've unchecked those boxes, but still in source-code in head-section I get this:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script> 
<script type="text/javascript" src="plugins/mootools/mootools-more.js?1.2.4.4"></script>

I've included the lightbox js from lightbox2's website, but that didn't do the trick either. Can it be like the diffrent javascript is working against each other? Can't figure out why it' not working... =(

**thyon** · 09/17/2010, 11:13

you should not run slimbox AND mediabox.. you should only activate mediabox (its better).

**Tibbelit** · 09/17/2010, 11:39

Originally Posted by thyon

you should not run slimbox AND mediabox.. you should only activate mediabox (its better).

I've tried that :/.

Here's my settings for the layout and the gallery:
http://img713.imageshack.us/img713/6120/conato.jpg

// EDIT //

Got it working! I comment away the line that invluded the moodoo javascript. And included the lightbox javascript. That wasn't the best solution I guess, but it's a least working =)

just that the "close" button isn't working in Chorme. But I'll probably live with that =)

**Ben** · 09/17/2010, 20:08

If you simply use the standard, unmodified fe_page template, everything should work perfectly. It sounds like you removed (or never added) this line just before the closing <body> tag: <?php echo $this->mootools; ?>

The following code is rendered by this tag, which you should find at the end of your page source once you correct the template.

Code:

<script type="text/javascript" src="plugins/mediabox/js/mediabox.js?1.2.0"></script>

<script type="text/javascript">
<![CDATA[//><!--
Mediabox.scanPage = function() {
  var links = $$("a").filter(function(el) {
    return el.rel && el.rel.test(/^lightbox/i);
  });
  $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    var rel0 = this.rel.replace(/[[]|]/gi," ");
    var relsize = rel0.split(" ");
    return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
  });
};
window.addEvent("domready", Mediabox.scanPage);
//--><!]]>
</script>