PhotoSwipe v4.1.1 packaged for meteor
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:https://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.