foto: image album browser and control

[minimedit.git] / foto / album.inc.php

diff --git a/foto/album.inc.php b/foto/album.inc.php
new file mode 100644 (file)
index 0000000..597e9a4
--- /dev/null
+++ b/foto/album.inc.php
@@ -0,0 +1,100 @@
+<script src="/lib/album.js"></script>
+<link rel="stylesheet" href="/lib/photoswipe.css">
+<link rel="stylesheet" href="/lib/photoswipe-ui/default-skin.css">
+
+<?php
+include 'lib/photoswipe.html';
+?>
+
+<script>
+var pswpElement = document.querySelectorAll('.pswp')[0]
+var images = [];
+
+function openphotoswipe(index) {
+       var options = {
+               index: index,
+               loop: false,
+               getThumbBoundsFn: function(index) {
+                       var thumbpos = images[index].el.getBoundingClientRect();
+                       var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
+                       return { x:thumbpos.left, y:thumbpos.top + pageYScroll, w:thumbpos.width };
+               },
+               tapToClose: false,
+               clickToCloseNonZoomable: false,
+               closeElClasses: [], 
+               shareButtons: [
+                       {id:'download', label:'Origineel downloaden', url:'{{raw_image_url}}', download:true}
+               ],
+       };
+       var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, images, options);
+       gallery.init();
+       return false;
+}
+
+var gallery = document.querySelector('.album');
+var images = [];
+var ratios = [];
+
+var imgquery = gallery.querySelectorAll('img');
+for (i = 0; i < imgquery.length; i++) {
+       (function () {
+               var img = imgquery[i];
+               var index = images.length;
+               var size = img.getAttribute('data-size');
+               size = size ? size.split('x') : [img.width * 5, img.height * 5];
+               var item = {
+                       src: img.parentNode.getAttribute('href'),
+                       msrc: img.getAttribute('src'),
+                       w: size[0],
+                       h: size[1],
+                       el: img,
+                       pid: img.parentNode.getAttribute('href'),
+                       title: img.getAttribute('title'),
+               };
+               images.push(item);
+               img.onclick = function () { return openphotoswipe(index) };
+               ratios.push(size[0] / size[1]);
+       })();
+}
+
+function imgjustify() {
+       var csspad = window.getComputedStyle(gallery.children[0]).getPropertyValue('padding-right');
+       var pad = csspad && parseFloat(csspad.replace(/px$/, '')) || 4.5;
+       var config = {
+               containerWidth: gallery.offsetWidth,
+               containerPadding: pad,
+               boxSpacing: pad * 2,
+               targetRowHeight: 200,
+       };
+       var layout = require('justified-layout')(ratios, config);
+
+       gallery.style.position = 'relative';
+       gallery.style.height = layout.containerHeight + 'px';
+       for (i = 0; i < layout.boxes.length; i++) {
+               (function () {
+                       var imgel = images[i].el;
+                       imgel.style.width = layout.boxes[i].width + 'px';
+                       imgel.style.height = layout.boxes[i].height + 'px';
+                       imgel.style.position = 'absolute';
+                       imgel.style.top = layout.boxes[i].top + 'px';
+                       imgel.style.left = layout.boxes[i].left + 'px';
+
+                       var thumbtarget = imgel.src.replace(/(\/thumb\/)\d+/, '$1'+layout.boxes[i].height)
+                       if (imgel.complete) {
+                               imgel.src = thumbtarget;
+                       }
+                       else if (thumbtarget != imgel.src) {
+                               var loadthumb = new Image();
+                               loadthumb.src = thumbtarget;
+                               loadthumb.onload = function() {
+                                       imgel.src = this.src;
+                               };
+                       }
+               })();
+       }
+};
+
+window.addEventListener('resize', imgjustify, false);
+imgjustify();
+
+</script>