Once you setup a photo gallery, you might want to link it up to a third-party script for additional features. This tutorial will show you how to use Surreal CMS with Fancybox, a very popular plugin for photo galleries.

Before you get started, make sure you’re already including the necessary scripts and stylesheets on your page. For details on how to do this, refer to the Fancybox website.

The markup

Surreal generates simple, semantic markup for its photo galleries. To make them work with Fancybox, we’ll need to use a bit of JavaScript to shim the HTML.

Fancybox is pretty flexible, so all we need to do is add data-fancybox-group attributes to each photo in the gallery and initialize it. Here’s an example of the markup Surreal will produce:

<div id="my-gallery" class="editable-gallery">
    <a href="full.jpg">
        <img src="thumb.jpg" alt="Your Description">
    </a>
    ...
</div>

And here’s the markup Fancybox wants us to use:

<div id="my-gallery" class="editable-gallery">
    <a href="full.jpg" data-fancybox-group="gallery-1">
        <img src="thumb.jpg" alt="Description here">
    </a>
    ...
</div>

The shim

To get from the markup that Surreal outputs to the markup that Fancybox requires, we’ll need to do a couple things:

• Add a data-fancybox-group attribute to each link in the gallery
• Tell Fancybox to use the image’s alt attribute for captions

Here’s what the code looks like:

$(document).ready( function() {

    // Don't execute if we're in the Live Editor
    if( !window.isCMS ) {

        // Group images by gallery using `data-fancybox-group` attributes
        var galleryId = 1;
        $('.editable-gallery').each( function() {
            $(this).find('a').attr('data-fancybox-group', 'gallery-' + galleryId++);
        });

        // Initialize Fancybox
        $('.editable-gallery a').fancybox({
            // Use the `alt` attribute for captions per http://fancyapps.com/fancybox/#useful
            beforeShow: function() {
                var alt = this.element.find('img').attr('alt');
                this.inner.find('img').attr('alt', alt);
                this.title = alt;
            }
        });

    }

});

This code will work even if you have multiple galleries on the page. By default, the photos in each gallery will be grouped in their respective galleries. You’re welcome to modify this snippet and use it however you like.

How it works

The script loops through each gallery on the page and adds a data-fancybox-group attribute to all the photos inside. This tells Fancybox to group them by gallery so you can use the next and previous buttons.

Then it initializes Fancybox and, borrowing a snippet from their documentation, tells it to use the image’s alt attribute instead of the link’s title attribute for the caption.