1 <script src="/lib/album.js"></script>
2 <link rel="stylesheet" href="/lib/photoswipe.css">
3 <link rel="stylesheet" href="/lib/photoswipe-ui/default-skin.css">
6 include 'lib/photoswipe.html';
10 var pswpElement = document.querySelectorAll('.pswp')[0]
13 function openphotoswipe(index) {
17 getThumbBoundsFn: function(index) {
18 var thumbpos = images[index].el.getBoundingClientRect();
19 var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
20 return { x:thumbpos.left, y:thumbpos.top + pageYScroll, w:thumbpos.width };
23 clickToCloseNonZoomable: false,
26 {id:'download', label:'Origineel downloaden', url:'{{raw_image_url}}', download:true}
29 var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, images, options);
34 var gallery = document.querySelector('.album');
38 var imgquery = gallery.querySelectorAll('img');
39 for (i = 0; i < imgquery.length; i++) {
41 var img = imgquery[i];
42 var index = images.length;
43 var size = img.getAttribute('data-size');
44 size = size ? size.split('x') : [img.width * 5, img.height * 5];
46 src: img.parentNode.getAttribute('href'),
47 msrc: img.getAttribute('src'),
51 pid: img.parentNode.getAttribute('href'),
52 title: img.getAttribute('title'),
55 img.onclick = function () { return openphotoswipe(index) };
56 ratios.push(size[0] / size[1]);
60 function imgjustify() {
61 var csspad = window.getComputedStyle(gallery.children[0]).getPropertyValue('padding-right');
62 var pad = csspad && parseFloat(csspad.replace(/px$/, '')) || 4.5;
64 containerWidth: gallery.offsetWidth,
65 containerPadding: pad,
69 var layout = require('justified-layout')(ratios, config);
71 gallery.style.position = 'relative';
72 gallery.style.height = layout.containerHeight + 'px';
73 for (i = 0; i < layout.boxes.length; i++) {
75 var imgel = images[i].el;
76 imgel.style.width = layout.boxes[i].width + 'px';
77 imgel.style.height = layout.boxes[i].height + 'px';
78 imgel.style.position = 'absolute';
79 imgel.style.top = layout.boxes[i].top + 'px';
80 imgel.style.left = layout.boxes[i].left + 'px';
82 var thumbtarget = imgel.src.replace(/(\/thumb\/)\d+/, '$1'+layout.boxes[i].height)
84 imgel.src = thumbtarget;
86 else if (thumbtarget != imgel.src) {
87 var loadthumb = new Image();
88 loadthumb.src = thumbtarget;
89 loadthumb.onload = function() {
97 window.addEventListener('resize', imgjustify, false);