document.addEventListener('DOMContentLoaded', function () {
    var items = [];
    document.querySelectorAll('figure').forEach(function ($figure, index) {
        if ($figure.className == 'no-photoswipe') return true;
        var $a = $figure.querySelector('a'),
            $img = $figure.querySelector('img'),
            $src = $a.href,
            $title = $img.alt,
            $msrc = $img.src;
        var $size = $a.dataset.size.split('x');
        var item = {
            src: $src,
            w: $size[0],
            h: $size[1],
            title: $title,
            msrc: $msrc
        };
        items.push(item);
        // Event handler for click on a figure
        $figure.addEventListener('click', function (event) {
            event.preventDefault();  // prevent the normal behaviour i.e. load the <a> hyperlink
            // Get the PSWP element and initialize it with the desired options
            var $pswp = document.querySelector('.pswp');
            var options = {
                index: index,
                bgOpacity: 0.8,
                showHideOpacity: true,
                shareEl: false
            };
            new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
        }, false);
    });
}, false);