I’m using MooTabs for a page that I want four galleries on. But every time I reference the galleries, they don’t show up. I’m using Ditto to pull the information from an unpublished directory that contains the four galleries. But for some reason it won’t render. I think it may have something to do with the MooTabs code, but not sure.
I’ve created multiple galleries before and they worked great, but this time it’s not working. Why would creating a tabbed browsing experience destroy the multiple galleries. Here’s what I’m trying to do:
<div id="r_col">
<h1>Landscape Design Services</h1>
<div id="myTabs" class="mootabs">
<ul class="mootabs_title">
<li title="Commercial">Commercial</li>
<li title="Residential">Residential</li>
<li title="CivicPublic">Civic & Public</li>
<li title="Development">Development</li>
</ul>
<div id="Commercial" class="mootabs_panel">
<h3>Commercial Services</h3>
<div class="tab_info">
<div class="l_side">
<p>Donec egestas ullamcorper dui. Donec nec orci. </p>
<ul class="square">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Donec at urna sed sem pharetra facilisis.</li>
<li>Integer malesuada urna sed erat.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Donec at urna sed sem pharetra facilisis.</li>
</ul>
</div>
<div class="r_side">
<div class="pics">
[[MaxiGallery? &display=`embedded` &embedtype=`slimbox`&max_pic_number=`4` &max_thumb_size=`150x100` ]]
</div>
<p>*Click <a href="#">Here</a> to see our complete gallery.</p>
</div>
</div><!-- End Tab Info -->
<div class="clearer"></div>
</div><!-- End Commerical Panel -->
<div id="Residential" class="mootabs_panel">
<h3>Residential Services</h3>
<div class="tab_info">
<div class="l_side">
<p>Donec egestas ullamcorper dui. </p>
<ul class="square">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Donec at urna sed sem pharetra facilisis.</li>
<li>Integer malesuada urna sed erat.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Donec at urna sed sem pharetra facilisis.</li>
</ul>
</div>
<div class="r_side">
<div class="pics">
[[MaxiGallery? &display=`embedded` &embedtype=`slimbox`&max_pic_number=`4` &max_thumb_size=`150x100` ]]
</div>
<p>*Click <a href="#">Here</a> to see our complete gallery.</p>
</div>
</div><!-- End Tab Info -->
<div class="clearer"></div>
</div>
<div AND SO ON..........>
Sorry about all the code, but I need to be specific. Oh, BTW, (0.9.6, MG 0.5.2). Each <div> is a tab that the MooTabs code hide/shows whenever clicked. But, the Galleries won’t show up. Please help! Has anyone ever done something like this? Thanks.
