photoswipe module

gistfile1.js

// lightbox module 
// we are using photoSwipe
// https://github.com/dimsemenov/PhotoSwipe
var lightbox = ( function() {

    var init = function() {
        console.log( 'site.lightbox.init()' );
        bindEventHandlers();

        if( $( '.imagelist' ).length > 0 ) {
            build();
        }
    }

    var bindEventHandlers = function() {
        $( document )
            .on( 'click', '.imagelist > li > a', function( e ) {
                e.preventDefault();

                // a bit complicated traversing to have the ability 
                // of multiple galleries on the same page
                var imagelist = $( this ).closest( '.imagelist' );
                var index = imagelist.find( 'li' ).index( $( this ).closest( 'li' ) );
                initBox( imagelist, index );
            } );
    }

    var build = function() {
        console.log( 'site.lightbox.build()' );

        var html = '<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button><button class="pswp__button pswp__button--share" title="Share"></button><button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button><button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button><button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div>';

        $( 'body' )
            .append( $( html ) );
    }

    var initBox = function( imagelist, index ) {
        console.log( 'site.lightbox.initBox( ' + index + ' )' );

        var slides = [];

        imagelist.find( 'a' )
            .each( function() {

                var src = $( this ).attr( 'href' ) || '';
                var width = parseInt( $( this ).attr( 'data-width' ) ) || 0;
                var height = parseInt( $( this ).attr( 'data-height' ) ) || 0;

                slides.push( {
                    src: src,
                    w: width,
                    h: height
                } );
            } );

        console.log( slides );

        var gallery = new PhotoSwipe( $( '.pswp' )[0], PhotoSwipeUI_Default, slides, { 
            index: index,
            bgOpacity: 0.8,
            fullscreenEl: false,
            zoomEl: false,
            shareEl: false                    
        } );
        gallery.init();

    }

    return {
        init: function() { init(); }
    }

} )();