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,
27 if ($User and $User->admin('foto')) {
28 printf("\t\t\t{id:'%s', label:'%s', url:'%s'},\n",
29 'cover', 'Cover instellen', "/edit/foto/cover$Args?img={{image_url}}"
33 {id:'download', label:'Origineel downloaden', url:'{{raw_image_url}}', download:true}
36 var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, images, options);
41 var gallery = document.querySelector('.album');
45 var imgquery = gallery.querySelectorAll('img');
46 for (i = 0; i < imgquery.length; i++) {
48 var img = imgquery[i];
49 var index = images.length;
50 var size = img.getAttribute('data-size');
51 size = size ? size.split('x') : [img.width * 5, img.height * 5];
53 src: img.parentNode.getAttribute('href'),
54 msrc: img.getAttribute('src'),
58 pid: img.parentNode.getAttribute('href'),
59 title: img.getAttribute('title'),
62 img.onclick = function () { return openphotoswipe(index) };
63 ratios.push(size[0] / size[1]);
67 function imgjustify() {
68 var csspad = window.getComputedStyle(gallery.children[0]).getPropertyValue('padding-right');
69 var pad = csspad && parseFloat(csspad.replace(/px$/, '')) || 4.5;
71 containerWidth: gallery.offsetWidth,
72 containerPadding: pad,
76 var layout = require('justified-layout')(ratios, config);
78 gallery.style.position = 'relative';
79 gallery.style.height = layout.containerHeight + 'px';
80 for (i = 0; i < layout.boxes.length; i++) {
82 var imgel = images[i].el;
83 imgel.style.width = layout.boxes[i].width + 'px';
84 imgel.style.height = layout.boxes[i].height + 'px';
85 imgel.style.position = 'absolute';
86 imgel.style.top = layout.boxes[i].top + 'px';
87 imgel.style.left = layout.boxes[i].left + 'px';
92 if (request = window.location.hash.match(/pid=(.*)/)) {
93 index = images.findIndex(row => row.src == request[1]);
94 openphotoswipe(index);
97 window.addEventListener('resize', imgjustify, false);