Galleriffic Photo Gallery on CMS Page

[glennlawre]

I am trying to add a Galleriffic photo gallery to a CMS page but it is not working correctly for me. I have successfully implemented this page as a custom page on my site, but to show someone how to modify this would not be as easy as if I had it in a CMS page that could be edited via the BO.

 

My custom page that works is here

 

And the CMS page where I have tried to implement is here

 

Basically I have copied the code from my custom .tpl page and inserted it into my CMS page in the html editor. All of the necessary js & css I have called via the CMSController.php controller, so it is called to the CMS page.

 

Here is the code i am using on my CMS page:

 

  	 <script type="text/javascript">
		document.write('<style>.noscript { display: none; }</style>');
	</script>

<div id="page">
<div id="container">

<div id="captionLeft">

<div class="image-desc">
<p>If you would like to view more of the range please call to arrange a visit to our Windy Arbour showroom in Dublin 14.</p>

</div>
</div>

<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content"> </div>

<div id="thumbs" class="navigation">
<ul class="thumbs noscript"><!-- Start of item -->

<li><a class="thumb" title="Amethyst nugget clasp" name="leaf" href="http://clasped.ie/clasped2/clasp3/img/uploads/clasps/large/Clasp-Large01.jpg"></a> <img src="http://clasped.ie/clasped2/clasp3/img/uploads/clasps/thumbs/Clasp-Thumb01.jpg" alt="Amethyst nugget clasp" />

<div class="caption">

<div class="download"><a href="http://clasped.ie/clasped2/clasp3/clasps/1-clasp01.html">More info / Buy</a></div>

<div class="image-title"> </div>
<div class="image-desc">
<p>Clasp: Rough amethyst nugget clasp</p>
<p>Size: 21x20x14mm</p>
<p>Fitting: Steel</p>
<p>Price: <span title="euro250">€250</span></p>
</div>
</div>
</li>

<!-- End of item --> <!-- Start of item -->

<li><a class="thumb" title="Black onyx cylinder clasp" name="leaf" href="http://clasped.ie/clasped2/clasp3/img/uploads/clasps/large/Clasp-Large02.jpg"></a> <img src="http://clasped.ie/clasped2/clasp3/img/uploads/clasps/thumbs/Clasp-Thumb02.jpg" alt="Black onyx cylinder clasp" />

<div class="caption">

<div class="download"><a href="http://clasped.ie/clasped2/clasp3/clasps/2-clasp02.html">More info / Buy</a></div>

<div class="image-title"> </div>
<div class="image-desc">
<p>Clasp: Handmade black onyx cylinder clasp</p>
<p>Size: 21x14mm</p>
<p>Fitting: Steel</p>
<p>Price: <span title="euro175">€175</span></p>
</div>
</div>
</li>

<!-- End of item --> <!-- Start of item -->

<li><a class="thumb" title="Chalcedony hexagonal barrel clasp" name="leaf" href="http://clasped.ie/clasped2/clasp3/img/uploads/clasps/large/Clasp-Large03.jpg"></a> <img src="http://clasped.ie/clasped2/clasp3/img/uploads/clasps/thumbs/Clasp-Thumb03.jpg" alt="Chalcedony hexagonal barrel clasp" />

<div class="caption">

<div class="download"><a href="http://clasped.ie/clasped2/clasp3/clasps/3-clasp03.html">More info / Buy</a></div>

<div class="image-title"> </div>
<div class="image-desc">
<p>Clasp: Chalcedony hexagonal barrel clasp</p>
<p>Size: 15x20mm</p>
<p>Fitting: Silver</p>
<p>Price: <span title="euro175">€175</span></p>
</div>
</div>
</li>

<!-- End of item --></ul>

</div>
<div style="clear: both;"> </div>
</div>
</div>

 

Anyone any ideas what I might be doing wrong?

 

Thanks in advance...

[glennlawre]

Any help please...?