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                         {id:'download', label:'Origineel downloaden', url:'{{raw_image_url}}', download:true}
  27                 ],
  28         };
  29         var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, images, options);
  30         gallery.init();
  31         return false;
  32 }
  33
  34 var gallery = document.querySelector('.album');
  35 var images = [];
  36 var ratios = [];
  37
  38 var imgquery = gallery.querySelectorAll('img');
  39 for (i = 0; i < imgquery.length; i++) {
  40         (function () {
  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];
  45                 var item = {
  46                         src: img.parentNode.getAttribute('href'),
  47                         msrc: img.getAttribute('src'),
  48                         w: size[0],
  49                         h: size[1],
  50                         el: img,
  51                         pid: img.parentNode.getAttribute('href'),
  52                         title: img.getAttribute('title'),
  53                 };
  54                 images.push(item);
  55                 img.onclick = function () { return openphotoswipe(index) };
  56                 ratios.push(size[0] / size[1]);
  57         })();
  58 }
  59
  60 function imgjustify() {
  61         var csspad = window.getComputedStyle(gallery.children[0]).getPropertyValue('padding-right');
  62         var pad = csspad && parseFloat(csspad.replace(/px$/, '')) || 4.5;
  63         var config = {
  64                 containerWidth: gallery.offsetWidth,
  65                 containerPadding: pad,
  66                 boxSpacing: pad * 2,
  67                 targetRowHeight: 200,
  68         };
  69         var layout = require('justified-layout')(ratios, config);
  70
  71         gallery.style.position = 'relative';
  72         gallery.style.height = layout.containerHeight + 'px';
  73         for (i = 0; i < layout.boxes.length; i++) {
  74                 (function () {
  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';
  81
  82                         var thumbtarget = imgel.src.replace(/(\/thumb\/)\d+/, '$1'+layout.boxes[i].height)
  83                         if (imgel.complete) {
  84                                 imgel.src = thumbtarget;
  85                         }
  86                         else if (thumbtarget != imgel.src) {
  87                                 var loadthumb = new Image();
  88                                 loadthumb.src = thumbtarget;
  89                                 loadthumb.onload = function() {
  90                                         imgel.src = this.src;
  91                                 };
  92                         }
  93                 })();
  94         }
  95 };
  96
  97 window.addEventListener('resize', imgjustify, false);
  98 imgjustify();
  99
 100 </script>