foto/album.inc.php

   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">
   4
   5 <?php
   6 include 'lib/photoswipe.html';
   7 ?>
   8
   9 <script>
  10 var pswpElement = document.querySelectorAll('.pswp')[0]
  11 var images = [];
  12
  13 function openphotoswipe(index) {
  14         var options = {
  15                 index: index,
  16                 loop: false,
  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 };
  21                 },
  22                 tapToClose: false,
  23                 clickToCloseNonZoomable: false,
  24                 closeElClasses: [],
  25                 shareButtons: [
  26 <?php
  27 if ($User->admin('foto')) {
  28         printf("\t\t\t{id:'%s', label:'%s', url:'%s'},\n",
  29                 'cover', 'Cover instellen', "/edit/foto/cover{$Page->path}?img={{image_url}}"
  30         );
  31 }
  32 ?>
  33                         {id:'download', label:'Origineel downloaden', url:'{{raw_image_url}}', download:true}
  34                 ],
  35         };
  36         var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, images, options);
  37         gallery.init();
  38         return false;
  39 }
  40
  41 var gallery = document.querySelector('.album');
  42 var images = [];
  43 var ratios = [];
  44
  45 var imgquery = gallery.querySelectorAll('img');
  46 for (i = 0; i < imgquery.length; i++) {
  47         (function () {
  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];
  52                 var item = {
  53                         src: img.parentNode.getAttribute('href'),
  54                         msrc: img.getAttribute('src'),
  55                         w: size[0],
  56                         h: size[1],
  57                         el: img,
  58                         pid: img.parentNode.getAttribute('href'),
  59                         title: img.getAttribute('title'),
  60                 };
  61                 images.push(item);
  62                 img.onclick = function () { return openphotoswipe(index) };
  63                 ratios.push(size[0] / size[1]);
  64         })();
  65 }
  66
  67 function imgjustify() {
  68         var csspad = window.getComputedStyle(gallery.children[0]).getPropertyValue('padding-right');
  69         var pad = csspad && parseFloat(csspad.replace(/px$/, '')) || 4.5;
  70         var config = {
  71                 containerWidth: gallery.offsetWidth,
  72                 containerPadding: pad,
  73                 boxSpacing: pad * 2,
  74                 targetRowHeight: 200,
  75         };
  76         var layout = require('justified-layout')(ratios, config);
  77
  78         gallery.style.position = 'relative';
  79         gallery.style.height = layout.containerHeight + 'px';
  80         for (i = 0; i < layout.boxes.length; i++) {
  81                 (function () {
  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';
  88                 })();
  89         }
  90 };
  91
  92 if (request = window.location.hash.match(/pid=(.*)/)) {
  93         index = images.findIndex(row => row.src == request[1]);
  94         openphotoswipe(index);
  95 }
  96
  97 window.addEventListener('resize', imgjustify, false);
  98 imgjustify();
  99
 100 </script>