Skip to content

Instantly share code, notes, and snippets.

@sulram

sulram/block-gallery.html

Created October 26, 2020 18:49
Show Gist options
  • Save sulram/0f303cff554bd03730e6360bbce1de9b to your computer and use it in GitHub Desktop.
Save sulram/0f303cff554bd03730e6360bbce1de9b to your computer and use it in GitHub Desktop.
Download ZIP
Statamic + Photoswipe
Raw
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.css">
<link rel="stylesheet" href="{{ theme:css }}">
</head>
<body>
{{ template_content }}
{{ partial:photoswipe }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>
<script src="{{ theme:js src="sulram.photoswipe"}}"></script>
<script src="{{ theme:js }}"></script>
</body>
</html>
Raw
photoswipe.html
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<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>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<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>
Raw
sulram.photoswipe.js
;(function($) {
/* PhotoSwipes */
var pswpElement = $('.pswp')[0];
var openGallery = function(selector,index){
var slides = [];
$(selector).each(function(i,el){
var size = $(el).attr('data-size').split('x');
slides.push({
src: $(el).attr('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10),
title: $(el).attr('title')
});
});
var options = {
index: index,
shareEl: false,
fullscreenEl: false,
showHideOpacity: true,
getThumbBoundsFn: function(index) {
// find thumbnail element
var thumbnail = document.querySelectorAll(selector)[index];
// get window scroll Y
var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
// optionally get horizontal scroll
// get position of element relative to viewport
var rect = thumbnail.getBoundingClientRect();
// w = width
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
// Good guide on how to get element coordinates:
// http://javascript.info/tutorial/coordinates
}
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, slides, options);
gallery.init();
};
if($('a.photoswipe').length){
var image_links = $('a.photoswipe');
image_links.on('click',function(e){
e.preventDefault();
var img = $(this).find('img');
var that = this;
var rel = $(this).attr('rel');
//$(this).attr('data-size', img.width() * 4 + 'x' + img.height() * 4);
var index = $('a.photoswipe[rel="'+rel+'"]').index(this)
setTimeout( function(){
console.log("a.photoswipe",img,rel,index)
openGallery('a.photoswipe[rel="'+rel+'"]', index);
}, 1);
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment