activate lightbox in MaxiGallery

589 Posts

Eoler Reply #11, 17 years, 6 months ago

Quote from: ryanjm27 at Mar 31, 2009, 08:59 PM

Here’s my template code. All of the code for MaxiGallery is the default code, I haven’t modified anything.

You’re missing base href in your template’s head:

<base href="[(site_url)]"></base>

4,213 Posts

doze Reply #12, 17 years, 6 months ago

Usually this is a css problem. Something in your site template css collides with lightbox css and the picture is not shown in the box. Try to comment out stuff from your site template css and get the lightbox first working. Then add stuff back one by one to see where it breaks.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

17 Posts

ryanjm27 Reply #13, 17 years, 6 months ago

Thanks, I’ll check the CSS, too. It’s pretty clean, I claim to be pretty good with CSS but you never know.

Also, while I was testing this, I had a separate template for the gallery, so that’s why the snippet call was right in the template. Now, I changed it to use my regular template, and here’s the code. So now I have the snipped call in the "content" area.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[(site_name)] | [*pagetitle*]</title>
<link href="/assets/css/mod.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body id="[*alias*]">

<div id="wrapper">

	<div id="logo">
    	{{logo}}
    </div>

    <div id="menu">
       {{navbar}}
    </div>
   
    <div class="clear"></div>
   
    <div id="main-content">
   
   	  <div id="content">

      	[*#content*]
        
        
      </div>
      
     <div id="sidebar">
   
   		{{sidebar}}

               [[AjaxSearch]]
        
     </div>

	 </div>
  
     <div id="footer">

		{{footer}}
        
     </div>
    
</div>
</body>
</html>

Unfortunately, I’m still having the same results.

THanks again for all the help. This just reaffirms my love for MODx, the community is very helpful!

--Ryan--

17 Posts

ryanjm27 Reply #14, 17 years, 6 months ago

I also added <base href="[(site_url)]"></base> to the <head>...still no change.

4,213 Posts

doze Reply #15, 17 years, 6 months ago

So you tried to get rid of all other css than the css that maxigallery includes automatically?

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

17 Posts

ryanjm27 Reply #16, 17 years, 6 months ago

Yes. I actually just temporarily got rid of all of my CSS and it was still having the same issue.

4,213 Posts

doze Reply #17, 17 years, 6 months ago

Ok, just visited your page.. if you click on the thumbnails, you will get 4 javascript errors. They happen because you are using mootools js library on the page and lightbox uses prototype + scriptaculous libraries. Those won’t work together.

So you need to use the slimbox embed type instead of the lightboxv2. Slimbox looks just the same as lightbox v2, but it uses mootools.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

17 Posts

ryanjm27 Reply #18, 17 years, 6 months ago

Doze--Thank you so much! That worked. I appreciate everyone’s help.

--Ryan--

17 Posts

ryanjm27 Reply #19, 17 years, 6 months ago

I thought it was working, but somehow it the way the thumbnails were displayed was off, so I tried to mess with things and now it doesn’t work again. Here’s what I have for the snippet call now: [!MaxiGallery? &display=`embedded` &embedtype=`slimbox` !]

Is that part correct at least?

4,213 Posts

doze Reply #20, 17 years, 6 months ago

There might be a problem now that mootools.js is included twice on the page (once from ajaxsearch and another one from maxigallery). If they are different versions, that causes problems. I’m not sure what version ajaxsearch uses and if it works with slimbox, but you can try by adding &disable_js_libs=`1` to maxigallery call. That tells maxigallery not to include mootools on the page.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."