PhotoSwipe

PhotoSwipe v4.1.1 packaged for meteor

How to use

Add the pswp template to your body or layout

{{> pswp}}

Example which initializes a gallery with just a single element and minimal controls.

Template.myTemplate.events({
    "click img.photoswipe": function(e) {
        var gallery = new PhotoSwipe($('.pswp')[0], PhotoSwipeUI_Default, [
            {
                src: e.target.dataset.src, // assumes the high-res source is in data-src attribute of the image element
                msrc: e.target.src,
                w: e.target.dataset.width, // PhotoSwipe requires you to know the dimensions
                h: e.target.dataset.height // More information: http://photoswipe.com/documentation/faq.html
            }
        ], {
            index: 0,
            getThumbBoundsFn: function(index) {
                // See Options -> getThumbBoundsFn section of documentation for more info
                var thumbnail = e.target,
                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                    rect = thumbnail.getBoundingClientRect();
                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            },
            barsSize: {top:0,bottom:0},
            captionEl: false,
            fullscreenEl: false,
            shareEl: false,
            tapToClose: true,
            tapToToggleControls: false
        });
        gallery.init();
    }
});

More information in their getting started and options.