Photo Gallery HTML

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>