Assemble Gallery

Dependencies.md

Bower

bower install --save-dev magnific-popup

The script I've gone with is magnific-popup by Dmitri Semonov

Figure out for yourself how you're getting it onto your pages, since that'll be based on your workflow.

NPM

npm install --save-dev handlebars-helpers

(if the helper isn't updated yet, change the line in package.json to "handlebars-helpers": "git://github.com/Melindrea/handlebars-helpers.git#master")

Add the helper to the options for assemble: helpers: ['handlebars-helpers']

Data

Each image needs metadata attached to it, in this format:

id: 'first'
alt: 'Smaller gallery image'
thumbnail: 'http://placehold.it/350x150'
full: 'http://placehold.it/500x300'
size:
    width: 350
    height: 150
caption: 'This is the caption of 1'

Markup

For a gallery that can be navigated, the parent of the images need to have the class js-gallery.

Example:

<ul class="js-gallery gallery">
    {{#each page.gallery}}<!-- assumes that the data of the specified page has a gallery key with the images -->
    <li>{{thumbnailImage this}}</li>
    {{/each}}
</ul>

main.js

// The following code sets up the galleries and individual thumbnail-scripts, unless the window-width < 500px
$(document).ready(function() {
    var defaultValues = {
        type:'image',
        disableOn: function () {
            // Detect here whether you want to show the popup
            // return true if you want
            if ($(window).width() < 500) {
                return false;
            }
            return true;
        },
        image: {
            titleSrc: function (item) {
                var caption = $(item.el).parent('figure').find('figcaption');
                if (caption.length > 0) {
                    return caption.html();
                }
                return '';
            }
        }
    };
    $('[rel=thumbnail]').magnificPopup(defaultValues);

    $('.js-gallery').each(function () {
        $(this).find('[rel=thumbnail]').magnificPopup(
            $.extend({}, defaultValues,
                {
                    gallery: {
                    preload: [0,2], // read about this option in next Lazy-loading section

                    navigateByImgClick: true,

                    enabled: true
                }
            }
        ));
    });
});