Example image gallery

This is a simple HTML page to give a very basic demonstration of how to setup gallery of images and make them editable using CushyCMS.

Caveat: this solution requires javascript, and uses repeatable regions in CushyCMS which are only part of the pro features
  1. Gallery
  2. HTML
  3. Javascript
<ul class="cushycms gallery">
  <li>
    <a href="gallery1.jpg" class="fancybox" rel="gallery" title="The Floating Garden (2012)">
      <img class="cushycms thumbnail" src="gallery1_thumb.jpg" title="The Floating Garden (2012)" width="320px" height="240px" alt="The Floating Garden (2012)">
    </a>
    <img class="cushycms main" src="" title="main image" width="480px" height="360px">
    <h5 class="cushycms-html description" title="description">The Floating Garden (2012)</h5>
  </li>
  <li>
    <a href="gallery2.jpg" class="fancybox" rel="gallery" title="Fluorescence (2000)">
      <img class="cushycms thumbnail" src="gallery2_thumb.jpg" title="Fluorescence (2000)" width="320px" height="240px" alt="Fluorescence (2000)">
    </a>
    <img class="cushycms main" src="" title="main image" width="480px" height="360px">
    <h5 class="cushycms-html description" title="description">Fluorescence (2000)</h5>
  </li>
  <li>
    <a href="gallery3.jpg" class="fancybox" rel="gallery" title="Episteme (2006)">
      <img class="cushycms thumbnail" src="gallery3_thumb.jpg" title="Episteme (2006)" width="320px" height="240px" alt="Episteme (2006)">
    </a>
    <img class="cushycms main" src="" title="main image" width="480px" height="360px">
    <h5 class="cushycms-html description" title="description">Episteme (2006)</h5>
  </li>
</ul>
$(document).ready(function() {
  $('ul.gallery li').each(function() {
    // Find the main image for this particular fancybox element.
    var image = $(this).find('img.main').first();
    var thumb = $(this).find('img.thumbnail').first();
    var desc  = $.trim($(this).find('h5.description').first().html());
    var link  = $(this).find('a.fancybox').first();

    // Set the href for each link to be the src of the main image inside that link (which is currently hidden).
    link.attr('href', image.attr('src'));

    // Also remove the src from the main image so the browser doesn't download it.
    image.attr('src', '');

    // Fix the title & alt tags of the thumbnail.
    thumb.attr('title', desc);
    thumb.attr('alt', desc);
    link.attr('title', desc);

    // We're ready to enable the fancybox!
    link.fancybox({
      helpers: {
        title: {
          type: 'inside'
        }
      }
    });
  });
});
The images used in this gallery are from one of my favorite online artists Digital Blasphemy. I highly recommend you checkout his work.

The basics for this particular implementation should hopefully be pretty easy to follow. Here are some things to note if you view the source of the above gallery.

  1. There are in fact 2 images in the source for each gallery item. One is the thumbnail, and the other is the main (bigger) image. Both these images have hardcoded width and height attributes. This is to utilize the image resizing feature of CushyCMS to make sure our editors don't upload images that will blow out the design. The downside here is that the editor will need to upload the same image twice. But the upside is that the resulting page is much nicer looking and better for viewers of the site.
  2. The source also contains a description that is also hidden in the same way the main image is hidden. This is because for CushyCMS to be able to edit the content, it has to exist somewhere. But we don't want it visible by default, only in the fancybox modal. In the javascript source there is some code that is moving the content of the editable description element into the title of the link for the modal to display.
  3. We're using a <h5> tag to edit the description. Whilst this doesn't make for great semantic HTML, we know that CushyCMS will correctly encode any HTML (such as & symbols) inside these tags, as well as give a nice tiny 1 line editable box on the edit screen. The edit box also won't have a toolbar with all the icons, which is ideal as we don't want the edit to be adding flash objects, links or any other fancy stuff to the description.
  4. This solution uses both jQuery and FancyBox as an alternative to other lightbox or modal solutions. I found this the easiest to use for my particular example here. Solutions that work work automatically without you adding any JS yourself won't work in this situation since we are using our own JS to alter the description etc and this needs to happen before the modal does what it needs to do.

Here is a screenshot of how this looks to your editor. We have only taken a sample of the edit boxes for one of the images above. This will of course be repeated for all 3 images. As you can see in the top right, there are control buttons for your editor to clone the entire editable group. This will clone the whole <li> element from the example code.