Using the
AD Gallery JQuery plugin with Gallery is easy.
Upload the AD Gallery scripts and css and images (I put them in an assets/js/adgallery/ folder)
Link to the jquery.ad-gallery.min.js and jquery.ad-gallery.css files, wherever you put them.
HTML:
[[!Gallery? &album=`3` &toPlaceholder=`gallery` &thumbTpl=`adGalleryTpl`]]
<div id="album-item" class="ad-gallery">
<h2>[[+gallery.name]]</h2>
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
[[+gallery]]
</ul>
</div><!-- .ad-thumbs -->
</div><!-- .ad-nav -->
</div><!-- #album-item -->
adGalleryTpl chunk:
<li>
<a href="[[+image]]">
<img src="[[+thumbnail]]" title="[[+name]]" alt="[[+description]]" class="image4">
</a>
</li>
Javascript:
<script type="text/javascript">
$(function() {
var galleries = $('.ad-gallery').adGallery();
});
</script>
and adjust CSS as desired.
-
- 1 Posts
What does the class="image4" represent in the adGalleryTpl chunk?
I have no idea. I don't remember, and looking at the site I used this for, I don't see any use of it.
Ah! I see where it came from; I just copied one of the image listings from their site's demo to make the tpl out of; they have each image with a class image0, image1, etc. I have no idea what it would be used for.
☆ A M B ☆