Author: Webvanta
This is the HTML code to create a photo gallery using the Galleriffic jQuery plug-in. Without JS, it will just show the images. When the Galleriffic initialization runs, it turns the list of images into a slideshow/gallery.
See the recipes Photo Gallery CSS and Photo Gallery JS for the companion pieces.
<div class='span-6'> <!-- 240-pixel column for thumbnails, via Bluetprint CSS -->
<div id="thumbs" class="navigation"> <!-- galleriffic uses the contents of this div to drive everything -->
<ul class="thumbs noscript">
<w:assets:each tag='gallery'> <!-- change this tag to find the assets you want -->
<w:if_rendition name='thumb'>
<li><a class="thumb" href="<w:path rendition='medium' />"> <!-- choose rendition for large image -->
<img src='<w:path rendition="square_thumb" />' alt='' /> <!-- choose rendition for thumbnail -->
</a>
<div class='caption'>
<w:unless condition="caption.blank?">
<p><w:caption /></p>
</w:unless>
</div>
</li>
</w:if_rendition>
</w:assets:each>
</ul>
</div>
</div>
<div class='span-16 last'> <!-- 640-pixel column for main images, via Blueprint CSS -->
<div id='empty_gallery' style='display:none'>
<h2>No images are currently in the gallery</h2>
<p>Upload them via Content > Images and Files</p>
<p>When uploading, select the "gallery" tag</p>
<p>See <a href="http://www.webvanta.com/photo-gallery-help">Using the Photo Gallery</a> for details</p>
</div>
<div id='container'> <!-- the divs in this container are filled with content by the galleriffic JS -->
<div id="gallery" class="content">
<div class="slideshow-container"> <!-- main image area -->
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption"></div> <!-- caption area -->
<div id="controls" class="controls clearfix"></div> <!-- slideshow controls -->
</div>
</div>
</div>
<script type="text/javascript">
// Show the main image display only if JS is enabled
jQuery('div.content').css('display', 'block');
</script>