hack in photoswipe

static/app.js

@@ -60,6 +60,20 @@ app.addSetter("hash.update", (data) => {
     }
 });
 
+app.addSetter("photoswipe.close", (data) => {
+    closePhotoSwipe();
+});
+
+app.addSetter("photoswipe.openLink", (data) => {
+    let siteUrl = photoSwipeGallery.currItem.siteUrl;
+    console.log("siteUrl=", siteUrl);
+
+    if ( siteUrl ){
+        window.open(siteUrl);
+    }
+});
+
+
 let store = new Reef.Store({
     data: {
         hash: {
@@ -145,11 +159,16 @@ for (const [name, f] of Object.entries(app.getComponents())) {
 
 document.addEventListener('click', (el) => {
 
+    let ps = el.target.closest('[data-photoswipe');
+    if ( ps ){
+        openPhotoSwipe(ps);
+        return;
+    }
+
     // we always want to close the menu on click.  if we clicked an item,
     // that will still trigger below
     let burger = el.target.closest('.navbar-burger');
-    console.log("the burger is: ", burger);
-    if ( !burger ){
+    if ( !burger && store.data.menuOpen && !isPhotoSwipeOpen ){
         store.do('navbar.closeMenu');
     }
     
@@ -213,6 +232,10 @@ window.addEventListener('resize', (evt) => {
     store.do("render");
 });
 
+document.addEventListener('render', () => {
+    console.log("render");
+});
+
 Reef.databind(appComponent);
 
 store.do('load.user');

static/client.css

@@ -1,3 +1,11 @@
+body {
+    background-color: black;
+}
+
+#app {
+    background-color: white;
+}
+
 .brickwall {
     display: flex;
 }
@@ -293,4 +301,27 @@
 .navbar-item span, .navbar-item img{
     line-height: 24px;
     vertical-align: middle;
-}
+}
+
+#pswp__button--edit {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+NTE8L3RpdGxlPjxwYXRoIGQ9Ik04NC44NTAxMiw1MFY4MS43NDUxMkExMy4yNzAxMiwxMy4yNzAxMiwwLDAsMSw3MS41OTUyNCw5NUgxOC4yNTQ5MUExMy4yNzAxMiwxMy4yNzAxMiwwLDAsMSw1LDgxLjc0NTEyVjI4LjQwNTI4QTEzLjI3MDEyLDEzLjI3MDEyLDAsMCwxLDE4LjI1NDkxLDE1LjE1MDRINTBhMi41LDIuNSwwLDAsMSwwLDVIMTguMjU0OTFBOC4yNjQyMyw4LjI2NDIzLDAsMCwwLDEwLDI4LjQwNTI4VjgxLjc0NTEyQTguMjY0MjQsOC4yNjQyNCwwLDAsMCwxOC4yNTQ5MSw5MEg3MS41OTUyNGE4LjI2NDIzLDguMjY0MjMsMCwwLDAsOC4yNTQ4OC04LjI1NDg5VjUwYTIuNSwyLjUsMCwwLDEsNSwwWk04OS4xNDg0Niw2LjIzNzkyYTQuMjI2NjEsNC4yMjY2MSwwLDAsMC01Ljk3NzI5LDBsLTMzLjk2MjksMzMuOTYzTDU5Ljc5OTE2LDUwLjc5MTc2bDMzLjk2Mjg5LTMzLjk2M2E0LjIyNjUzLDQuMjI2NTMsMCwwLDAsMC01Ljk3NzIzWk00My42MjM4LDU4LjMxMjg3bDEzLjAwOTQtNC4zNTUxNkw0Ni4wNDIyNiw0My4zNjY4M2wtNC4zNTUxLDEzLjAwOTRBMS41MzAwNSwxLjUzMDA1LDAsMCwwLDQzLjYyMzgsNTguMzEyODdaIj48L3BhdGg+PC9zdmc+");
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+    background-position: 13px 11px;
+}
+
+#pswp__button--siteUrl {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczp4b2RtPSJodHRwOi8vd3d3LmNvcmVsLmNvbS9jb3JlbGRyYXcvb2RtLzIwMDMiIHhtbDpzcGFjZT0icHJlc2VydmUiIHZlcnNpb249IjEuMSIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247dGV4dC1yZW5kZXJpbmc6Z2VvbWV0cmljUHJlY2lzaW9uO2ltYWdlLXJlbmRlcmluZzpvcHRpbWl6ZVF1YWxpdHk7IiB2aWV3Qm94PSIwIDAgMzIwIDMxOS45OSIgeD0iMHB4IiB5PSIwcHgiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgogICAKICAgIC5maWwwIHtmaWxsOiNGRkZGRkY7ZmlsbC1ydWxlOm5vbnplcm99CiAgIAogIDwvc3R5bGU+PC9kZWZzPjxnPjxwYXRoIGNsYXNzPSJmaWwwIiBkPSJNMTYwIDI4My4zM2MzNC4wNiwwIDY0LjksLTEzLjgxIDg3LjIxLC0zNi4xMiAyMi4zMSwtMjIuMzEgMzYuMTIsLTUzLjE2IDM2LjEyLC04Ny4yMSAwLC0zNC4wNiAtMTMuODEsLTY0Ljg5IC0zNi4xMiwtODcuMjEgLTIyLjMxLC0yMi4zMSAtNTMuMTYsLTM2LjEzIC04Ny4yMSwtMzYuMTMgLTM0LjA2LDAgLTY0LjksMTMuODEgLTg3LjIxLDM2LjEzIC0yMi4zMSwyMi4zMSAtMzYuMTMsNTMuMTUgLTM2LjEzLDg3LjIxIDAsMzQuMDYgMTMuODEsNjQuOSAzNi4xMyw4Ny4yMSAyMi4zMSwyMi4zMSA1My4xNSwzNi4xMiA4Ny4yMSwzNi4xMnptMTAxLjM1IC0yMS45OGMtMjUuOTQsMjUuOTMgLTYxLjc4LDQxLjk4IC0xMDEuMzUsNDEuOTggLTM5LjU4LDAgLTc1LjQyLC0xNi4wNSAtMTAxLjM1LC00MS45OCAtMjUuOTQsLTI1Ljk0IC00MS45OCwtNjEuNzggLTQxLjk4LC0xMDEuMzUgMCwtMzkuNTggMTYuMDUsLTc1LjQyIDQxLjk4LC0xMDEuMzUgMjUuOTMsLTI1Ljk0IDYxLjc3LC00MS45OCAxMDEuMzUsLTQxLjk4IDM5LjU4LDAgNzUuNDIsMTYuMDUgMTAxLjM1LDQxLjk4IDI1LjkzLDI1LjkzIDQxLjk4LDYxLjc3IDQxLjk4LDEwMS4zNSAwLDM5LjU4IC0xNi4wNSw3NS40MiAtNDEuOTgsMTAxLjM1eiI+PC9wYXRoPjxwYXRoIGNsYXNzPSJmaWwwIiBkPSJNMjYuNjYgMTY5Ljg2Yy01LjUsMCAtOS45NiwtNC40NiAtOS45NiwtOS45NiAwLC01LjUgNC40NiwtOS45NiA5Ljk2LC05Ljk2bDI2Ni42NyAtMS4wNGM1LjUsMCA5Ljk2LDQuNDYgOS45Niw5Ljk2IDAsNS41IC00LjQ2LDkuOTYgLTkuOTYsOS45NmwtMjY2LjY3IDEuMDR6Ij48L3BhdGg+PHBhdGggY2xhc3M9ImZpbDAiIGQ9Ik0xNDkuNTIgMjYuNjZjMCwtNS41IDQuNDYsLTkuOTYgOS45NiwtOS45NiA1LjUsMCA5Ljk2LDQuNDYgOS45Niw5Ljk2bDEuMDQgMjY2LjY3YzAsNS41IC00LjQ2LDkuOTYgLTkuOTYsOS45NiAtNS41LDAgLTkuOTYsLTQuNDYgLTkuOTYsLTkuOTZsLTEuMDQgLTI2Ni42N3oiPjwvcGF0aD48cGF0aCBjbGFzcz0iZmlsMCIgZD0iTTE2MCAyODMuMzNjMTQuMzIsMCAyNy44OSwtMTIuODEgMzguMjQsLTMzLjUxIDExLjM5LC0yMi43NyAxOC40MywtNTQuNTIgMTguNDMsLTg5LjgzIDAsLTM1LjMxIC03LjA1LC02Ny4wNiAtMTguNDMsLTg5LjgzIC0xMC4zNSwtMjAuNyAtMjMuOTEsLTMzLjUxIC0zOC4yNCwtMzMuNTEgLTE0LjMyLDAgLTI3Ljg5LDEyLjgxIC0zOC4yNCwzMy41MSAtMTEuMzksMjIuNzcgLTE4LjQzLDU0LjUyIC0xOC40Myw4OS44MyAwLDM1LjMxIDcuMDUsNjcuMDYgMTguNDMsODkuODMgMTAuMzUsMjAuNyAyMy45MSwzMy41MSAzOC4yNCwzMy41MXptNTYuMDUgLTI0LjZjLTEzLjc3LDI3LjU2IC0zMy41NSw0NC42IC01Ni4wNSw0NC42IC0yMi41LDAgLTQyLjI4LC0xNy4wNSAtNTYuMDUsLTQ0LjYgLTEyLjc0LC0yNS40NyAtMjAuNjIsLTYwLjQxIC0yMC42MiwtOTguNzMgMCwtMzguMzMgNy44OCwtNzMuMjYgMjAuNjIsLTk4LjczIDEzLjc3LC0yNy41NiAzMy41NSwtNDQuNiA1Ni4wNSwtNDQuNiAyMi41LDAgNDIuMjgsMTcuMDUgNTYuMDUsNDQuNiAxMi43NCwyNS40NyAyMC42Miw2MC40MSAyMC42Miw5OC43MyAwLDM4LjMzIC03Ljg4LDczLjI2IC0yMC42Miw5OC43M3oiPjwvcGF0aD48cGF0aCBjbGFzcz0iZmlsMCIgZD0iTTQ1LjcgMTA0LjA0Yy01LjUsMC4wMiAtOS45OCwtNC40MiAtMTAsLTkuOTIgLTAuMDIsLTUuNSA0LjQyLC05Ljk4IDkuOTIsLTEwbDIyOC42OCAtMS4wNGM1LjUsLTAuMDIgOS45OCw0LjQyIDEwLDkuOTIgMC4wMiw1LjUgLTQuNDIsOS45OCAtOS45MiwxMGwtMjI4LjY4IDEuMDR6Ij48L3BhdGg+PHBhdGggY2xhc3M9ImZpbDAiIGQ9Ik00NS43IDIzNy40MmMtNS41LDAuMDIgLTkuOTgsLTQuNDIgLTEwLC05LjkyIC0wLjAyLC01LjUgNC40MiwtOS45OCA5LjkyLC0xMGwyMjguNjggLTEuMDRjNS41LC0wLjAyIDkuOTgsNC40MiAxMCw5LjkyIDAuMDIsNS41IC00LjQyLDkuOTggLTkuOTIsMTBsLTIyOC42OCAxLjA0eiI+PC9wYXRoPjwvZz48L3N2Zz4=");
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+    background-position: 12px 12px;
+}
+
+.pswp__siteUrl--empty{
+    display: none;
+}
+
+.pswp__caption__center {
+    text-align: center;
+    max-width: 1200px;
+}

static/components/about.js

@@ -28,6 +28,8 @@ app.addComponent('aboutModal', (store) => { return new Reef("#aboutModal", {
                         <br />
                         &nbsp;ui framework &raquo; <a href="https://reefjs.com">reef</a>
                         <br />
+                        &nbsp;zoom viewer &raquo; <a href="https://photoswipe.com/">photoswipe</a>
+                        <br />
                         &nbsp;boards icon &raquo; <a href="https://thenounproject.com/term/squares/1160031/">squares by Andrejs Kirma from the Noun Project</a>
                         <br />
                         &nbsp;pin icon &raquo; <a href="https://thenounproject.com/term/pinned/1560993/">pinned by Gregor Cresnar from the Noun Project</a>

static/components/brickwall.js

@@ -3,6 +3,14 @@ app.addSetter('brickwall.toggleHiddenBoards', (data) => {
     window.localStorage.showHiddenBoards = data.showHiddenBoards;
 });
 
+app.addSetter('brickwall.zoom', (data, el) => {
+    let pinId = el.getAttribute('data-pinid');
+    openPhotoSwipe({
+        pinId: pinId,
+        element: el
+    });
+});
+
 app.addComponent('brickwall', (store) => { return new Reef('#brickwall', {
 
     store: store,
@@ -82,7 +90,7 @@ app.addComponent('brickwall', (store) => { return new Reef('#brickwall', {
         function createBrickForPin(board, pin){
             return  { height: pin.thumbnailHeight, template: /*html*/`
             <div class="brick" >
-                <a data-pinid="${pin.id}" data-onclick="pinZoomModal.open">
+                <a data-pinid="${pin.id}" data-onclick="brickwall.zoom">
                     <img class="thumb" src="${getThumbnailImagePath(pin.id)}" width="${pin.thumbnailWidth}" height="${pin.thumbnailHeight}" />
                 </a>
             </div>

static/components/editpin.js

@@ -1,13 +1,20 @@
 app.addSetter('editPinModal.open', (data) => {
+    let pinId = photoSwipeGallery.currItem.pinId;
+    closePhotoSwipe();
+    data.editPinModal.pin = getPinById(pinId);
     data.editPinModal.active = true;
 });
 
 app.addSetter('editPinModal.close', (data) => {
     data.editPinModal.active = false;
 
+    let pinId = data.editPinModal.pin.id;
+
     data.editPinModal.pin = null;
     data.editPinModal.newBoardName = null;
     data.editPinModal.saveInProgress = false;
+
+    openPhotoSwipe(pinId);
 });
 
 app.addGetter('editPinModal.isValid', (data) => {
@@ -111,9 +118,6 @@ app.addComponent('editPinModal', (store) => { return new Reef("#editPinModal", {
             options += `<option value="${data.boards[i].id}">${data.boards[i].name}</option>`;
         }
 
-        console.log("render", data);
-
-        console.log("set new board field");
         let newBoardField = '';
         if ( data.editPinModal.pin && data.editPinModal.pin.boardId == "new" ){
         // if ( true ) {

static/components/pinzoom.js

@@ -31,12 +31,93 @@ app.addSetter('pinZoomModal.open', (data, el) => {
         
     let pinId = el.getAttribute("data-pinid");
 
-    if( pinId ){
-        let idx = getPinIndexById(pinId);
+    // if( pinId ){
+    //     let idx = getPinIndexById(pinId);
 
-        data.pinZoomModal.pin = data.board.pins[idx];
-        data.pinZoomModal.active = true;
+    //     data.pinZoomModal.pin = data.board.pins[idx];
+    //     data.pinZoomModal.active = true;
+    // }
+
+
+    let pswpElement = document.getElementById("pswp");
+
+    var items = [];
+    for ( let i = 0; i < data.board.pins.length; ++i ){
+        items.push({
+            src: getThumbnailImagePath(data.board.pins[i].id),
+            w: data.board.pins[i].originalWidth,
+            h: data.board.pins[i].originalHeight
+        });
     }
+
+    let options = {
+        index: getPinIndexById(pinId),
+        loop: false,
+        bgOpacity: 0.85,
+        getThumbBoundsFn: function(index) {
+            // See Options->getThumbBoundsFn section of docs for more info
+            var thumbnail = el,
+                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+                rect = thumbnail.getBoundingClientRect(); 
+
+            return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
+        },
+    };
+
+    let gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+
+    // var realViewportWidth,
+    //     useLargeImages = false,
+    //     firstResize = true,
+    //     imageSrcWillChange;
+
+    // gallery.listen('beforeResize', function() {
+
+    //     var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
+    //     dpiRatio = Math.min(dpiRatio, 2.5);
+    //     realViewportWidth = gallery.viewportSize.x * dpiRatio;
+
+
+    //     if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
+    //         if(!useLargeImages) {
+    //             useLargeImages = true;
+    //             imageSrcWillChange = true;
+    //         }
+            
+    //     } else {
+    //         if(useLargeImages) {
+    //             useLargeImages = false;
+    //             imageSrcWillChange = true;
+    //         }
+    //     }
+
+    //     if(imageSrcWillChange && !firstResize) {
+    //         gallery.invalidateCurrItems();
+    //     }
+
+    //     if(firstResize) {
+    //         firstResize = false;
+    //     }
+
+    //     imageSrcWillChange = false;
+
+    // });
+
+    // gallery.listen('gettingData', function(index, item) {
+    //     // if( useLargeImages ) {
+    //     //     item.src = item.o.src;
+    //     //     item.w = item.o.w;
+    //     //     item.h = item.o.h;
+    //     // } else {
+    //     //     item.src = item.m.src;
+    //     //     item.w = item.m.w;
+    //     //     item.h = item.m.h;
+    //     // }
+    // });
+
+    
+    gallery.init();
+
     
 });
 

static/index.html

@@ -17,11 +17,80 @@
         <meta name="theme-color" content="#ffffff">
 
         <link rel="stylesheet" href="pub/bulma-custom.css" />
-        <link rel="stylesheet" href="client.css" />               
+        
+        <link rel="stylesheet" href="photoswipe/photoswipe-4.1.3.css">
+        <link rel="stylesheet" href="photoswipe/default-skin/default-skin.css">
+        <link rel="stylesheet" href="client.css" />
     </head>
     <body>
         <div id="app"></div>
 
+
+        <div class="pswp" id="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+            <!-- Background of PhotoSwipe. 
+                 It's a separate element as animating opacity is faster than rgba(). -->
+            <div class="pswp__bg"></div>
+        
+            <!-- Slides wrapper with overflow:hidden. -->
+            <div class="pswp__scroll-wrap">
+        
+                <!-- Container that holds slides. 
+                    PhotoSwipe keeps only 3 of them in the DOM to save memory.
+                    Don't modify these 3 pswp__item elements, data is added later on. -->
+                <div class="pswp__container">
+                    <div class="pswp__item"></div>
+                    <div class="pswp__item"></div>
+                    <div class="pswp__item"></div>
+                </div>
+        
+                <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+                <div class="pswp__ui pswp__ui--hidden">
+        
+                    <div class="pswp__top-bar">
+        
+                        <!--  Controls are self-explanatory. Order can be changed. -->
+        
+                        <div class="pswp__counter"></div>
+        
+                        <button class="pswp__button pswp__button--close" title="Close (Esc)" data-onclick="photoswipe.close"></button>
+        
+                        <!--<button class="pswp__button pswp__button--share" title="Share"></button>-->
+                        <button id="pswp__button--siteUrl" class="pswp__button pswp__button--siteUrl" data-onclick="photoswipe.openLink" title="Edit"></button>
+                        <button id="pswp__button--edit" class="pswp__button pswp__button--edit" data-onclick="editPinModal.open" title="Edit"></button>
+        
+                        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+        
+                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+        
+                        <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
+                        <!-- element will get class pswp__preloader--active when preloader is running -->
+                        <div class="pswp__preloader">
+                            <div class="pswp__preloader__icn">
+                              <div class="pswp__preloader__cut">
+                                <div class="pswp__preloader__donut"></div>
+                              </div>
+                            </div>
+                        </div>
+                    </div>
+        
+                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+                    </button>
+        
+                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+                    </button>
+        
+                    <div class="pswp__caption">
+                        <div class="pswp__caption__center"></div>
+                    </div>
+        
+                </div>
+        
+            </div>
+        
+        </div>
+
+
         <script src="reef.min.js"></script>
   
         <script src="reef-bootstrap.js"></script>
@@ -38,6 +107,11 @@
         <script src="components/about.js"></script>
         <script src="app.js"></script>
 
+        <script src="photoswipe/photoswipe-4.1.3.min.js"></script>
+        <script src="photoswipe/photoswipe-ui-custom.js"></script>
+
+
+
     </body>
 
 </html>

static/photoswipe/default-skin/default-skin.css

@@ -0,0 +1,482 @@
+/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
+/*
+
+	Contents:
+
+	1. Buttons
+	2. Share modal and links
+	3. Index indicator ("1 of X" counter)
+	4. Caption
+	5. Loading indicator
+	6. Additional styles (root element, top bar, idle state, hidden state, etc.)
+
+*/
+/*
+	
+	1. Buttons
+
+ */
+/* <button> css reset */
+.pswp__button {
+    width: 44px;
+    height: 44px;
+    position: relative;
+    background: none;
+    cursor: pointer;
+    overflow: visible;
+    -webkit-appearance: none;
+    display: block;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    float: right;
+    opacity: 0.75;
+    -webkit-transition: opacity 0.2s;
+            transition: opacity 0.2s;
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+    .pswp__button:focus, .pswp__button:hover {
+      opacity: 1; }
+    .pswp__button:active {
+      outline: none;
+      opacity: 0.9; }
+    .pswp__button::-moz-focus-inner {
+      padding: 0;
+      border: 0; }
+  
+  /* pswp__ui--over-close class it added when mouse is over element that should close gallery */
+  .pswp__ui--over-close .pswp__button--close {
+    opacity: 1; }
+  
+  .pswp__button,
+  .pswp__button--arrow--left:before,
+  .pswp__button--arrow--right:before {
+    background: url(default-skin.png) 0 0 no-repeat;
+    background-size: 264px 88px;
+    width: 44px;
+    height: 44px; }
+  
+  @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
+    /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
+    .pswp--svg .pswp__button,
+    .pswp--svg .pswp__button--arrow--left:before,
+    .pswp--svg .pswp__button--arrow--right:before {
+      background-image: url(default-skin.svg); }
+    .pswp--svg .pswp__button--arrow--left,
+    .pswp--svg .pswp__button--arrow--right {
+      background: none; } }
+  
+  .pswp__button--close {
+    background-position: 0 -44px; }
+  
+  .pswp__button--share {
+    background-position: -44px -44px; }
+  
+  .pswp__button--fs {
+    display: none; }
+  
+  .pswp--supports-fs .pswp__button--fs {
+    display: block; }
+  
+  .pswp--fs .pswp__button--fs {
+    background-position: -44px 0; }
+  
+  .pswp__button--zoom {
+    display: none;
+    background-position: -88px 0; }
+  
+  .pswp--zoom-allowed .pswp__button--zoom {
+    display: block; }
+  
+  .pswp--zoomed-in .pswp__button--zoom {
+    background-position: -132px 0; }
+  
+  /* no arrows on touch screens */
+  .pswp--touch .pswp__button--arrow--left,
+  .pswp--touch .pswp__button--arrow--right {
+    visibility: hidden; }
+  
+  /*
+      Arrow buttons hit area
+      (icon is added to :before pseudo-element)
+  */
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right {
+    background: none;
+    top: 50%;
+    margin-top: -50px;
+    width: 70px;
+    height: 100px;
+    position: absolute; }
+  
+  .pswp__button--arrow--left {
+    left: 0; }
+  
+  .pswp__button--arrow--right {
+    right: 0; }
+  
+  .pswp__button--arrow--left:before,
+  .pswp__button--arrow--right:before {
+    content: '';
+    top: 35px;
+    background-color: rgba(0, 0, 0, 0.3);
+    height: 30px;
+    width: 32px;
+    position: absolute; }
+  
+  .pswp__button--arrow--left:before {
+    left: 6px;
+    background-position: -138px -44px; }
+  
+  .pswp__button--arrow--right:before {
+    right: 6px;
+    background-position: -94px -44px; }
+  
+  /*
+  
+      2. Share modal/popup and links
+  
+   */
+  .pswp__counter,
+  .pswp__share-modal {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+        user-select: none; }
+  
+  .pswp__share-modal {
+    display: block;
+    background: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    padding: 10px;
+    position: absolute;
+    z-index: 1600;
+    opacity: 0;
+    -webkit-transition: opacity 0.25s ease-out;
+            transition: opacity 0.25s ease-out;
+    -webkit-backface-visibility: hidden;
+    will-change: opacity; }
+  
+  .pswp__share-modal--hidden {
+    display: none; }
+  
+  .pswp__share-tooltip {
+    z-index: 1620;
+    position: absolute;
+    background: #FFF;
+    top: 56px;
+    border-radius: 2px;
+    display: block;
+    width: auto;
+    right: 44px;
+    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+    -webkit-transform: translateY(6px);
+        -ms-transform: translateY(6px);
+            transform: translateY(6px);
+    -webkit-transition: -webkit-transform 0.25s;
+            transition: transform 0.25s;
+    -webkit-backface-visibility: hidden;
+    will-change: transform; }
+    .pswp__share-tooltip a {
+      display: block;
+      padding: 8px 12px;
+      color: #000;
+      text-decoration: none;
+      font-size: 14px;
+      line-height: 18px; }
+      .pswp__share-tooltip a:hover {
+        text-decoration: none;
+        color: #000; }
+      .pswp__share-tooltip a:first-child {
+        /* round corners on the first/last list item */
+        border-radius: 2px 2px 0 0; }
+      .pswp__share-tooltip a:last-child {
+        border-radius: 0 0 2px 2px; }
+  
+  .pswp__share-modal--fade-in {
+    opacity: 1; }
+    .pswp__share-modal--fade-in .pswp__share-tooltip {
+      -webkit-transform: translateY(0);
+          -ms-transform: translateY(0);
+              transform: translateY(0); }
+  
+  /* increase size of share links on touch devices */
+  .pswp--touch .pswp__share-tooltip a {
+    padding: 16px 12px; }
+  
+  a.pswp__share--facebook:before {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: -12px;
+    right: 15px;
+    border: 6px solid transparent;
+    border-bottom-color: #FFF;
+    -webkit-pointer-events: none;
+    -moz-pointer-events: none;
+    pointer-events: none; }
+  
+  a.pswp__share--facebook:hover {
+    background: #3E5C9A;
+    color: #FFF; }
+    a.pswp__share--facebook:hover:before {
+      border-bottom-color: #3E5C9A; }
+  
+  a.pswp__share--twitter:hover {
+    background: #55ACEE;
+    color: #FFF; }
+  
+  a.pswp__share--pinterest:hover {
+    background: #CCC;
+    color: #CE272D; }
+  
+  a.pswp__share--download:hover {
+    background: #DDD; }
+  
+  /*
+  
+      3. Index indicator ("1 of X" counter)
+  
+   */
+  .pswp__counter {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 44px;
+    font-size: 13px;
+    line-height: 44px;
+    color: #FFF;
+    opacity: 0.75;
+    padding: 0 10px; }
+  
+  /*
+      
+      4. Caption
+  
+   */
+  .pswp__caption {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    min-height: 44px; }
+    .pswp__caption small {
+      font-size: 11px;
+      color: #BBB; }
+  
+  .pswp__caption__center {
+    text-align: left;
+    max-width: 420px;
+    margin: 0 auto;
+    font-size: 13px;
+    padding: 10px;
+    line-height: 20px;
+    color: #CCC; }
+  
+  .pswp__caption--empty {
+    display: none; }
+  
+  /* Fake caption element, used to calculate height of next/prev image */
+  .pswp__caption--fake {
+    visibility: hidden; }
+  
+  /*
+  
+      5. Loading indicator (preloader)
+  
+      You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
+  
+   */
+  .pswp__preloader {
+    width: 44px;
+    height: 44px;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin-left: -22px;
+    opacity: 0;
+    -webkit-transition: opacity 0.25s ease-out;
+            transition: opacity 0.25s ease-out;
+    will-change: opacity;
+    direction: ltr; }
+  
+  .pswp__preloader__icn {
+    width: 20px;
+    height: 20px;
+    margin: 12px; }
+  
+  .pswp__preloader--active {
+    opacity: 1; }
+    .pswp__preloader--active .pswp__preloader__icn {
+      /* We use .gif in browsers that don't support CSS animation */
+      background: url(preloader.gif) 0 0 no-repeat; }
+  
+  .pswp--css_animation .pswp__preloader--active {
+    opacity: 1; }
+    .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
+      -webkit-animation: clockwise 500ms linear infinite;
+              animation: clockwise 500ms linear infinite; }
+    .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
+      -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
+              animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
+  
+  .pswp--css_animation .pswp__preloader__icn {
+    background: none;
+    opacity: 0.75;
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    left: 15px;
+    top: 15px;
+    margin: 0; }
+  
+  .pswp--css_animation .pswp__preloader__cut {
+    /* 
+              The idea of animating inner circle is based on Polymer ("material") loading indicator 
+               by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
+          */
+    position: relative;
+    width: 7px;
+    height: 14px;
+    overflow: hidden; }
+  
+  .pswp--css_animation .pswp__preloader__donut {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    border: 2px solid #FFF;
+    border-radius: 50%;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: none;
+    margin: 0; }
+  
+  @media screen and (max-width: 1024px) {
+    .pswp__preloader {
+      position: relative;
+      left: auto;
+      top: auto;
+      margin: 0;
+      float: right; } }
+  
+  @-webkit-keyframes clockwise {
+    0% {
+      -webkit-transform: rotate(0deg);
+              transform: rotate(0deg); }
+    100% {
+      -webkit-transform: rotate(360deg);
+              transform: rotate(360deg); } }
+  
+  @keyframes clockwise {
+    0% {
+      -webkit-transform: rotate(0deg);
+              transform: rotate(0deg); }
+    100% {
+      -webkit-transform: rotate(360deg);
+              transform: rotate(360deg); } }
+  
+  @-webkit-keyframes donut-rotate {
+    0% {
+      -webkit-transform: rotate(0);
+              transform: rotate(0); }
+    50% {
+      -webkit-transform: rotate(-140deg);
+              transform: rotate(-140deg); }
+    100% {
+      -webkit-transform: rotate(0);
+              transform: rotate(0); } }
+  
+  @keyframes donut-rotate {
+    0% {
+      -webkit-transform: rotate(0);
+              transform: rotate(0); }
+    50% {
+      -webkit-transform: rotate(-140deg);
+              transform: rotate(-140deg); }
+    100% {
+      -webkit-transform: rotate(0);
+              transform: rotate(0); } }
+  
+  /*
+      
+      6. Additional styles
+  
+   */
+  /* root element of UI */
+  .pswp__ui {
+    -webkit-font-smoothing: auto;
+    visibility: visible;
+    opacity: 1;
+    z-index: 1550; }
+  
+  /* top black bar with buttons and "1 of X" indicator */
+  .pswp__top-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 44px;
+    width: 100%; }
+  
+  .pswp__caption,
+  .pswp__top-bar,
+  .pswp--has_mouse .pswp__button--arrow--left,
+  .pswp--has_mouse .pswp__button--arrow--right {
+    -webkit-backface-visibility: hidden;
+    will-change: opacity;
+    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+            transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+  
+  /* pswp--has_mouse class is added only when two subsequent mousemove events occur */
+  .pswp--has_mouse .pswp__button--arrow--left,
+  .pswp--has_mouse .pswp__button--arrow--right {
+    visibility: visible; }
+  
+  .pswp__top-bar,
+  .pswp__caption {
+    background-color: rgba(0, 0, 0, 0.5); }
+  
+  /* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
+  .pswp__ui--fit .pswp__top-bar,
+  .pswp__ui--fit .pswp__caption {
+    background-color: rgba(0, 0, 0, 0.3); }
+  
+  /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
+  .pswp__ui--idle .pswp__top-bar {
+    opacity: 0; }
+  
+  .pswp__ui--idle .pswp__button--arrow--left,
+  .pswp__ui--idle .pswp__button--arrow--right {
+    opacity: 0; }
+  
+  /*
+      pswp__ui--hidden class is added when controls are hidden
+      e.g. when user taps to toggle visibility of controls
+  */
+  .pswp__ui--hidden .pswp__top-bar,
+  .pswp__ui--hidden .pswp__caption,
+  .pswp__ui--hidden .pswp__button--arrow--left,
+  .pswp__ui--hidden .pswp__button--arrow--right {
+    /* Force paint & create composition layer for controls. */
+    opacity: 0.001; }
+  
+  /* pswp__ui--one-slide class is added when there is just one item in gallery */
+  .pswp__ui--one-slide .pswp__button--arrow--left,
+  .pswp__ui--one-slide .pswp__button--arrow--right,
+  .pswp__ui--one-slide .pswp__counter {
+    display: none; }
+  
+  .pswp__element--disabled {
+    display: none !important; }
+  
+  .pswp--minimal--dark .pswp__top-bar {
+    background: none; }

static/photoswipe/default-skin/default-skin.svg

@@ -0,0 +1 @@
+<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>

static/photoswipe/photoswipe-4.1.3.css

@@ -0,0 +1,179 @@
+/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
+/*
+	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
+*/
+/* pswp = photoswipe */
+.pswp {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    -ms-touch-action: none;
+    touch-action: none;
+    z-index: 1500;
+    -webkit-text-size-adjust: 100%;
+    /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
+    -webkit-backface-visibility: hidden;
+    outline: none; }
+    .pswp * {
+      -webkit-box-sizing: border-box;
+              box-sizing: border-box; }
+    .pswp img {
+      max-width: none; }
+  
+  /* style is added when JS option showHideOpacity is set to true */
+  .pswp--animate_opacity {
+    /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
+    opacity: 0.001;
+    will-change: opacity;
+    /* for open/close transition */
+    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+            transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+  
+  .pswp--open {
+    display: block; }
+  
+  .pswp--zoom-allowed .pswp__img {
+    /* autoprefixer: off */
+    cursor: -webkit-zoom-in;
+    cursor: -moz-zoom-in;
+    cursor: zoom-in; }
+  
+  .pswp--zoomed-in .pswp__img {
+    /* autoprefixer: off */
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    cursor: grab; }
+  
+  .pswp--dragging .pswp__img {
+    /* autoprefixer: off */
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: grabbing; }
+  
+  /*
+      Background is added as a separate element.
+      As animating opacity is much faster than animating rgba() background-color.
+  */
+  .pswp__bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0;
+    -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    will-change: opacity; }
+  
+  .pswp__scroll-wrap {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden; }
+  
+  .pswp__container,
+  .pswp__zoom-wrap {
+    -ms-touch-action: none;
+    touch-action: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0; }
+  
+  /* Prevent selection and tap highlights */
+  .pswp__container,
+  .pswp__img {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+        user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none; }
+  
+  .pswp__zoom-wrap {
+    position: absolute;
+    width: 100%;
+    -webkit-transform-origin: left top;
+    -ms-transform-origin: left top;
+    transform-origin: left top;
+    /* for open/close transition */
+    -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
+            transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+  
+  .pswp__bg {
+    will-change: opacity;
+    /* for open/close transition */
+    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+            transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+  
+  .pswp--animated-in .pswp__bg,
+  .pswp--animated-in .pswp__zoom-wrap {
+    -webkit-transition: none;
+    transition: none; }
+  
+  .pswp__container,
+  .pswp__zoom-wrap {
+    -webkit-backface-visibility: hidden; }
+  
+  .pswp__item {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden; }
+  
+  .pswp__img {
+    position: absolute;
+    width: auto;
+    height: auto;
+    top: 0;
+    left: 0; }
+  
+  /*
+      stretched thumbnail or div placeholder element (see below)
+      style is added to avoid flickering in webkit/blink when layers overlap
+  */
+  .pswp__img--placeholder {
+    -webkit-backface-visibility: hidden; }
+  
+  /*
+      div element that matches size of large image
+      large image loads on top of it
+  */
+  .pswp__img--placeholder--blank {
+    background: #222; }
+  
+  .pswp--ie .pswp__img {
+    width: 100% !important;
+    height: auto !important;
+    left: 0;
+    top: 0; }
+  
+  /*
+      Error message appears when image is not loaded
+      (JS option errorMsg controls markup)
+  */
+  .pswp__error-msg {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    text-align: center;
+    font-size: 14px;
+    line-height: 16px;
+    margin-top: -8px;
+    color: #CCC; }
+  
+  .pswp__error-msg a {
+    color: #CCC;
+    text-decoration: underline; }

static/photoswipe/photoswipe-ui-custom.js

@@ -0,0 +1,873 @@
+/**
+*
+* UI on top of main sliding area (caption, arrows, close button, etc.).
+* Built just using public methods/properties of PhotoSwipe.
+* 
+*/
+(function (root, factory) { 
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+	} else if (typeof exports === 'object') {
+		module.exports = factory();
+	} else {
+		root.PhotoSwipeUI_Default = factory();
+	}
+})(this, function () {
+
+	'use strict';
+
+
+
+var PhotoSwipeUI_Default =
+ function(pswp, framework) {
+
+	var ui = this;
+	var _overlayUIUpdated = false,
+		_controlsVisible = true,
+		_fullscrenAPI,
+		_controls,
+		_captionContainer,
+		_fakeCaptionContainer,
+		_indexIndicator,
+        _shareButton,
+        _siteUrlButton,
+		_shareModal,
+		_shareModalHidden = true,
+		_initalCloseOnScrollValue,
+		_isIdle,
+		_listen,
+
+		_loadingIndicator,
+		_loadingIndicatorHidden,
+		_loadingIndicatorTimeout,
+
+		_galleryHasOneSlide,
+
+		_options,
+		_defaultUIOptions = {
+			barsSize: {top:44, bottom:'auto'},
+			closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'], 
+			timeToIdle: 4000, 
+			timeToIdleOutside: 1000,
+			loadingIndicatorDelay: 1000, // 2s
+			
+			addCaptionHTMLFn: function(item, captionEl /*, isFake */) {
+				if(!item.title) {
+					captionEl.children[0].innerHTML = '';
+					return false;
+				}
+				captionEl.children[0].innerHTML = item.title;
+				return true;
+			},
+
+			closeEl:true,
+			captionEl: true,
+			fullscreenEl: true,
+			zoomEl: true,
+            shareEl: true,
+            siteUrlEl: true,
+			counterEl: true,
+			arrowEl: true,
+			preloaderEl: true,
+
+			tapToClose: false,
+			tapToToggleControls: true,
+
+			clickToCloseNonZoomable: true,
+
+			shareButtons: [
+				{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
+				{id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
+				{id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/'+
+													'?url={{url}}&media={{image_url}}&description={{text}}'},
+				{id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
+			],
+			getImageURLForShare: function( /* shareButtonData */ ) {
+				return pswp.currItem.src || '';
+			},
+			getPageURLForShare: function( /* shareButtonData */ ) {
+				return window.location.href;
+			},
+			getTextForShare: function( /* shareButtonData */ ) {
+				return pswp.currItem.title || '';
+			},
+				
+			indexIndicatorSep: ' / ',
+			fitControlsWidth: 1200
+
+		},
+		_blockControlsTap,
+		_blockControlsTapTimeout;
+
+
+
+	var _onControlsTap = function(e) {
+			if(_blockControlsTap) {
+				return true;
+			}
+
+
+			e = e || window.event;
+
+			if(_options.timeToIdle && _options.mouseUsed && !_isIdle) {
+				// reset idle timer
+				_onIdleMouseMove();
+			}
+
+
+			var target = e.target || e.srcElement,
+				uiElement,
+				clickedClass = target.getAttribute('class') || '',
+				found;
+
+			for(var i = 0; i < _uiElements.length; i++) {
+				uiElement = _uiElements[i];
+				if(uiElement.onTap && clickedClass.indexOf('pswp__' + uiElement.name ) > -1 ) {
+					uiElement.onTap();
+					found = true;
+
+				}
+			}
+
+			if(found) {
+				if(e.stopPropagation) {
+					e.stopPropagation();
+				}
+				_blockControlsTap = true;
+
+				// Some versions of Android don't prevent ghost click event 
+				// when preventDefault() was called on touchstart and/or touchend.
+				// 
+				// This happens on v4.3, 4.2, 4.1, 
+				// older versions strangely work correctly, 
+				// but just in case we add delay on all of them)	
+				var tapDelay = framework.features.isOldAndroid ? 600 : 30;
+				_blockControlsTapTimeout = setTimeout(function() {
+					_blockControlsTap = false;
+				}, tapDelay);
+			}
+
+		},
+		_fitControlsInViewport = function() {
+			return !pswp.likelyTouchDevice || _options.mouseUsed || screen.width > _options.fitControlsWidth;
+		},
+		_togglePswpClass = function(el, cName, add) {
+			framework[ (add ? 'add' : 'remove') + 'Class' ](el, 'pswp__' + cName);
+		},
+
+		// add class when there is just one item in the gallery
+		// (by default it hides left/right arrows and 1ofX counter)
+		_countNumItems = function() {
+			var hasOneSlide = (_options.getNumItemsFn() === 1);
+
+			if(hasOneSlide !== _galleryHasOneSlide) {
+				_togglePswpClass(_controls, 'ui--one-slide', hasOneSlide);
+				_galleryHasOneSlide = hasOneSlide;
+			}
+		},
+		_toggleShareModalClass = function() {
+			_togglePswpClass(_shareModal, 'share-modal--hidden', _shareModalHidden);
+		},
+		_toggleShareModal = function() {
+
+			_shareModalHidden = !_shareModalHidden;
+			
+			
+			if(!_shareModalHidden) {
+				_toggleShareModalClass();
+				setTimeout(function() {
+					if(!_shareModalHidden) {
+						framework.addClass(_shareModal, 'pswp__share-modal--fade-in');
+					}
+				}, 30);
+			} else {
+				framework.removeClass(_shareModal, 'pswp__share-modal--fade-in');
+				setTimeout(function() {
+					if(_shareModalHidden) {
+						_toggleShareModalClass();
+					}
+				}, 300);
+			}
+			
+			if(!_shareModalHidden) {
+				_updateShareURLs();
+			}
+			return false;
+		},
+
+		_openWindowPopup = function(e) {
+			e = e || window.event;
+			var target = e.target || e.srcElement;
+
+			pswp.shout('shareLinkClick', e, target);
+
+			if(!target.href) {
+				return false;
+			}
+
+			if( target.hasAttribute('download') ) {
+				return true;
+			}
+
+			window.open(target.href, 'pswp_share', 'scrollbars=yes,resizable=yes,toolbar=no,'+
+										'location=yes,width=550,height=420,top=100,left=' + 
+										(window.screen ? Math.round(screen.width / 2 - 275) : 100)  );
+
+			if(!_shareModalHidden) {
+				_toggleShareModal();
+			}
+			
+			return false;
+		},
+		_updateShareURLs = function() {
+			var shareButtonOut = '',
+				shareButtonData,
+				shareURL,
+				image_url,
+				page_url,
+				share_text;
+
+			for(var i = 0; i < _options.shareButtons.length; i++) {
+				shareButtonData = _options.shareButtons[i];
+
+				image_url = _options.getImageURLForShare(shareButtonData);
+				page_url = _options.getPageURLForShare(shareButtonData);
+				share_text = _options.getTextForShare(shareButtonData);
+
+				shareURL = shareButtonData.url.replace('{{url}}', encodeURIComponent(page_url) )
+									.replace('{{image_url}}', encodeURIComponent(image_url) )
+									.replace('{{raw_image_url}}', image_url )
+									.replace('{{text}}', encodeURIComponent(share_text) );
+
+				shareButtonOut += '<a href="' + shareURL + '" target="_blank" '+
+									'class="pswp__share--' + shareButtonData.id + '"' +
+									(shareButtonData.download ? 'download' : '') + '>' + 
+									shareButtonData.label + '</a>';
+
+				if(_options.parseShareButtonOut) {
+					shareButtonOut = _options.parseShareButtonOut(shareButtonData, shareButtonOut);
+				}
+			}
+			_shareModal.children[0].innerHTML = shareButtonOut;
+			_shareModal.children[0].onclick = _openWindowPopup;
+
+		},
+		_hasCloseClass = function(target) {
+			for(var  i = 0; i < _options.closeElClasses.length; i++) {
+				if( framework.hasClass(target, 'pswp__' + _options.closeElClasses[i]) ) {
+					return true;
+				}
+			}
+		},
+		_idleInterval,
+		_idleTimer,
+		_idleIncrement = 0,
+		_onIdleMouseMove = function() {
+			clearTimeout(_idleTimer);
+			_idleIncrement = 0;
+			if(_isIdle) {
+				ui.setIdle(false);
+			}
+		},
+		_onMouseLeaveWindow = function(e) {
+			e = e ? e : window.event;
+			var from = e.relatedTarget || e.toElement;
+			if (!from || from.nodeName === 'HTML') {
+				clearTimeout(_idleTimer);
+				_idleTimer = setTimeout(function() {
+					ui.setIdle(true);
+				}, _options.timeToIdleOutside);
+			}
+		},
+		_setupFullscreenAPI = function() {
+			if(_options.fullscreenEl && !framework.features.isOldAndroid) {
+				if(!_fullscrenAPI) {
+					_fullscrenAPI = ui.getFullscreenAPI();
+				}
+				if(_fullscrenAPI) {
+					framework.bind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
+					ui.updateFullscreen();
+					framework.addClass(pswp.template, 'pswp--supports-fs');
+				} else {
+					framework.removeClass(pswp.template, 'pswp--supports-fs');
+				}
+			}
+		},
+		_setupLoadingIndicator = function() {
+			// Setup loading indicator
+			if(_options.preloaderEl) {
+			
+				_toggleLoadingIndicator(true);
+
+				_listen('beforeChange', function() {
+
+					clearTimeout(_loadingIndicatorTimeout);
+
+					// display loading indicator with delay
+					_loadingIndicatorTimeout = setTimeout(function() {
+
+						if(pswp.currItem && pswp.currItem.loading) {
+
+							if( !pswp.allowProgressiveImg() || (pswp.currItem.img && !pswp.currItem.img.naturalWidth)  ) {
+								// show preloader if progressive loading is not enabled, 
+								// or image width is not defined yet (because of slow connection)
+								_toggleLoadingIndicator(false); 
+								// items-controller.js function allowProgressiveImg
+							}
+							
+						} else {
+							_toggleLoadingIndicator(true); // hide preloader
+						}
+
+					}, _options.loadingIndicatorDelay);
+					
+				});
+				_listen('imageLoadComplete', function(index, item) {
+					if(pswp.currItem === item) {
+						_toggleLoadingIndicator(true);
+					}
+				});
+
+			}
+		},
+		_toggleLoadingIndicator = function(hide) {
+			if( _loadingIndicatorHidden !== hide ) {
+				_togglePswpClass(_loadingIndicator, 'preloader--active', !hide);
+				_loadingIndicatorHidden = hide;
+			}
+		},
+		_applyNavBarGaps = function(item) {
+			var gap = item.vGap;
+
+			if( _fitControlsInViewport() ) {
+				
+				var bars = _options.barsSize; 
+				if(_options.captionEl && bars.bottom === 'auto') {
+					if(!_fakeCaptionContainer) {
+						_fakeCaptionContainer = framework.createEl('pswp__caption pswp__caption--fake');
+						_fakeCaptionContainer.appendChild( framework.createEl('pswp__caption__center') );
+						_controls.insertBefore(_fakeCaptionContainer, _captionContainer);
+						framework.addClass(_controls, 'pswp__ui--fit');
+					}
+					if( _options.addCaptionHTMLFn(item, _fakeCaptionContainer, true) ) {
+
+						var captionSize = _fakeCaptionContainer.clientHeight;
+						gap.bottom = parseInt(captionSize,10) || 44;
+					} else {
+						gap.bottom = bars.top; // if no caption, set size of bottom gap to size of top
+					}
+				} else {
+					gap.bottom = bars.bottom === 'auto' ? 0 : bars.bottom;
+				}
+				
+				// height of top bar is static, no need to calculate it
+				gap.top = bars.top;
+			} else {
+				gap.top = gap.bottom = 0;
+			}
+		},
+		_setupIdle = function() {
+			// Hide controls when mouse is used
+			if(_options.timeToIdle) {
+				_listen('mouseUsed', function() {
+					
+					framework.bind(document, 'mousemove', _onIdleMouseMove);
+					framework.bind(document, 'mouseout', _onMouseLeaveWindow);
+
+					_idleInterval = setInterval(function() {
+						_idleIncrement++;
+						if(_idleIncrement === 2) {
+							ui.setIdle(true);
+						}
+					}, _options.timeToIdle / 2);
+				});
+			}
+		},
+		_setupHidingControlsDuringGestures = function() {
+
+			// Hide controls on vertical drag
+			_listen('onVerticalDrag', function(now) {
+				if(_controlsVisible && now < 0.95) {
+					ui.hideControls();
+				} else if(!_controlsVisible && now >= 0.95) {
+					ui.showControls();
+				}
+			});
+
+			// Hide controls when pinching to close
+			var pinchControlsHidden;
+			_listen('onPinchClose' , function(now) {
+				if(_controlsVisible && now < 0.9) {
+					ui.hideControls();
+					pinchControlsHidden = true;
+				} else if(pinchControlsHidden && !_controlsVisible && now > 0.9) {
+					ui.showControls();
+				}
+			});
+
+			_listen('zoomGestureEnded', function() {
+				pinchControlsHidden = false;
+				if(pinchControlsHidden && !_controlsVisible) {
+					ui.showControls();
+				}
+			});
+
+		};
+
+
+
+	var _uiElements = [
+		{ 
+			name: 'caption', 
+			option: 'captionEl',
+			onInit: function(el) {  
+				_captionContainer = el; 
+			} 
+		},
+		{ 
+			name: 'share-modal', 
+			option: 'shareEl',
+			onInit: function(el) {  
+				_shareModal = el;
+			},
+			onTap: function() {
+				_toggleShareModal();
+			} 
+		},
+		{ 
+			name: 'button--share', 
+			option: 'shareEl',
+			onInit: function(el) { 
+				_shareButton = el;
+			},
+			onTap: function() {
+				_toggleShareModal();
+			} 
+        },
+        {
+            name: 'button--siteUrl',
+            option: 'siteUrlEl',
+            onInit: function(el) {
+                _siteUrlButton = el;
+            }
+        },
+		{ 
+			name: 'button--zoom', 
+			option: 'zoomEl',
+			onTap: pswp.toggleDesktopZoom
+		},
+		{ 
+			name: 'counter', 
+			option: 'counterEl',
+			onInit: function(el) {  
+				_indexIndicator = el;
+			} 
+		},
+		{ 
+			name: 'button--close', 
+			option: 'closeEl',
+			// onTap: pswp.close
+		},
+		{ 
+			name: 'button--arrow--left', 
+			option: 'arrowEl',
+			onTap: pswp.prev
+		},
+		{ 
+			name: 'button--arrow--right', 
+			option: 'arrowEl',
+			onTap: pswp.next
+		},
+		{ 
+			name: 'button--fs', 
+			option: 'fullscreenEl',
+			onTap: function() {  
+				if(_fullscrenAPI.isFullscreen()) {
+					_fullscrenAPI.exit();
+				} else {
+					_fullscrenAPI.enter();
+				}
+			} 
+		},
+		{ 
+			name: 'preloader', 
+			option: 'preloaderEl',
+			onInit: function(el) {  
+				_loadingIndicator = el;
+			} 
+		}
+
+	];
+
+	var _setupUIElements = function() {
+		var item,
+			classAttr,
+			uiElement;
+
+		var loopThroughChildElements = function(sChildren) {
+			if(!sChildren) {
+				return;
+			}
+
+			var l = sChildren.length;
+			for(var i = 0; i < l; i++) {
+				item = sChildren[i];
+				classAttr = item.className;
+
+				for(var a = 0; a < _uiElements.length; a++) {
+                    uiElement = _uiElements[a];
+
+					if(classAttr.indexOf('pswp__' + uiElement.name) > -1  ) {
+
+						if( _options[uiElement.option] ) { // if element is not disabled from options
+
+							framework.removeClass(item, 'pswp__element--disabled');
+							if(uiElement.onInit) {
+								uiElement.onInit(item);
+							}
+							
+							//item.style.display = 'block';
+						} else {
+							framework.addClass(item, 'pswp__element--disabled');
+							//item.style.display = 'none';
+						}
+					}
+				}
+			}
+		};
+		loopThroughChildElements(_controls.children);
+
+		var topBar =  framework.getChildByClass(_controls, 'pswp__top-bar');
+		if(topBar) {
+			loopThroughChildElements( topBar.children );
+		}
+	};
+
+
+	
+
+	ui.init = function() {
+
+		// extend options
+		framework.extend(pswp.options, _defaultUIOptions, true);
+
+		// create local link for fast access
+		_options = pswp.options;
+
+		// find pswp__ui element
+		_controls = framework.getChildByClass(pswp.scrollWrap, 'pswp__ui');
+
+		// create local link
+		_listen = pswp.listen;
+
+
+		_setupHidingControlsDuringGestures();
+
+		// update controls when slides change
+		_listen('beforeChange', ui.update);
+
+		// toggle zoom on double-tap
+		_listen('doubleTap', function(point) {
+			var initialZoomLevel = pswp.currItem.initialZoomLevel;
+			if(pswp.getZoomLevel() !== initialZoomLevel) {
+				pswp.zoomTo(initialZoomLevel, point, 333);
+			} else {
+				pswp.zoomTo(_options.getDoubleTapZoom(false, pswp.currItem), point, 333);
+			}
+		});
+
+		// Allow text selection in caption
+		_listen('preventDragEvent', function(e, isDown, preventObj) {
+			var t = e.target || e.srcElement;
+			if(
+				t && 
+				t.getAttribute('class') && e.type.indexOf('mouse') > -1 && 
+				( t.getAttribute('class').indexOf('__caption') > 0 || (/(SMALL|STRONG|EM)/i).test(t.tagName) ) 
+			) {
+				preventObj.prevent = false;
+			}
+		});
+
+		// bind events for UI
+		_listen('bindEvents', function() {
+			framework.bind(_controls, 'pswpTap click', _onControlsTap);
+			framework.bind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
+
+			if(!pswp.likelyTouchDevice) {
+				framework.bind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
+			}
+		});
+
+		// unbind events for UI
+		_listen('unbindEvents', function() {
+			if(!_shareModalHidden) {
+				_toggleShareModal();
+			}
+
+			if(_idleInterval) {
+				clearInterval(_idleInterval);
+			}
+			framework.unbind(document, 'mouseout', _onMouseLeaveWindow);
+			framework.unbind(document, 'mousemove', _onIdleMouseMove);
+			framework.unbind(_controls, 'pswpTap click', _onControlsTap);
+			framework.unbind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
+			framework.unbind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
+
+			if(_fullscrenAPI) {
+				framework.unbind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
+				if(_fullscrenAPI.isFullscreen()) {
+					_options.hideAnimationDuration = 0;
+					_fullscrenAPI.exit();
+				}
+				_fullscrenAPI = null;
+			}
+		});
+
+
+		// clean up things when gallery is destroyed
+		_listen('destroy', function() {
+			if(_options.captionEl) {
+				if(_fakeCaptionContainer) {
+					_controls.removeChild(_fakeCaptionContainer);
+				}
+				framework.removeClass(_captionContainer, 'pswp__caption--empty');
+			}
+
+			if(_shareModal) {
+				_shareModal.children[0].onclick = null;
+			}
+			framework.removeClass(_controls, 'pswp__ui--over-close');
+			framework.addClass( _controls, 'pswp__ui--hidden');
+			ui.setIdle(false);
+		});
+		
+
+		if(!_options.showAnimationDuration) {
+			framework.removeClass( _controls, 'pswp__ui--hidden');
+		}
+		_listen('initialZoomIn', function() {
+			if(_options.showAnimationDuration) {
+				framework.removeClass( _controls, 'pswp__ui--hidden');
+			}
+		});
+		_listen('initialZoomOut', function() {
+			framework.addClass( _controls, 'pswp__ui--hidden');
+		});
+
+		_listen('parseVerticalMargin', _applyNavBarGaps);
+		
+		_setupUIElements();
+
+		if(_options.shareEl && _shareButton && _shareModal) {
+			_shareModalHidden = true;
+		}
+
+		_countNumItems();
+
+		_setupIdle();
+
+		_setupFullscreenAPI();
+
+		_setupLoadingIndicator();
+	};
+
+	ui.setIdle = function(isIdle) {
+		_isIdle = isIdle;
+		_togglePswpClass(_controls, 'ui--idle', isIdle);
+	};
+
+	ui.update = function() {
+		// Don't update UI if it's hidden
+		if(_controlsVisible && pswp.currItem) {
+			
+			ui.updateIndexIndicator();
+
+			if(_options.captionEl) {
+				_options.addCaptionHTMLFn(pswp.currItem, _captionContainer);
+
+				_togglePswpClass(_captionContainer, 'caption--empty', !pswp.currItem.title);
+            }
+            
+            if ( _options.siteUrlEl ) {
+                _togglePswpClass(_siteUrlButton, 'siteUrl--empty', !pswp.currItem.siteUrl);
+            }
+
+            _overlayUIUpdated = true;
+            
+
+
+		} else {
+			_overlayUIUpdated = false;
+		}
+
+		if(!_shareModalHidden) {
+			_toggleShareModal();
+		}
+
+		_countNumItems();
+	};
+
+	ui.updateFullscreen = function(e) {
+
+		if(e) {
+			// some browsers change window scroll position during the fullscreen
+			// so PhotoSwipe updates it just in case
+			setTimeout(function() {
+				pswp.setScrollOffset( 0, framework.getScrollY() );
+			}, 50);
+		}
+		
+		// toogle pswp--fs class on root element
+		framework[ (_fullscrenAPI.isFullscreen() ? 'add' : 'remove') + 'Class' ](pswp.template, 'pswp--fs');
+	};
+
+	ui.updateIndexIndicator = function() {
+		if(_options.counterEl) {
+			_indexIndicator.innerHTML = (pswp.getCurrentIndex()+1) + 
+										_options.indexIndicatorSep + 
+										_options.getNumItemsFn();
+		}
+	};
+	
+	ui.onGlobalTap = function(e) {
+		e = e || window.event;
+		var target = e.target || e.srcElement;
+
+		if(_blockControlsTap) {
+			return;
+		}
+
+		if(e.detail && e.detail.pointerType === 'mouse') {
+
+			// close gallery if clicked outside of the image
+			if(_hasCloseClass(target)) {
+				pswp.close();
+				return;
+			}
+
+			if(framework.hasClass(target, 'pswp__img')) {
+				if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
+					if(_options.clickToCloseNonZoomable) {
+						pswp.close();
+					}
+				} else {
+					pswp.toggleDesktopZoom(e.detail.releasePoint);
+				}
+			}
+			
+		} else {
+
+			// tap anywhere (except buttons) to toggle visibility of controls
+			if(_options.tapToToggleControls) {
+				if(_controlsVisible) {
+					ui.hideControls();
+				} else {
+					ui.showControls();
+				}
+			}
+
+			// tap to close gallery
+			if(_options.tapToClose && (framework.hasClass(target, 'pswp__img') || _hasCloseClass(target)) ) {
+				pswp.close();
+				return;
+			}
+			
+		}
+	};
+	ui.onMouseOver = function(e) {
+		e = e || window.event;
+		var target = e.target || e.srcElement;
+
+		// add class when mouse is over an element that should close the gallery
+		_togglePswpClass(_controls, 'ui--over-close', _hasCloseClass(target));
+	};
+
+	ui.hideControls = function() {
+		framework.addClass(_controls,'pswp__ui--hidden');
+		_controlsVisible = false;
+	};
+
+	ui.showControls = function() {
+		_controlsVisible = true;
+		if(!_overlayUIUpdated) {
+			ui.update();
+		}
+		framework.removeClass(_controls,'pswp__ui--hidden');
+	};
+
+	ui.supportsFullscreen = function() {
+		var d = document;
+		return !!(d.exitFullscreen || d.mozCancelFullScreen || d.webkitExitFullscreen || d.msExitFullscreen);
+	};
+
+	ui.getFullscreenAPI = function() {
+		var dE = document.documentElement,
+			api,
+			tF = 'fullscreenchange';
+
+		if (dE.requestFullscreen) {
+			api = {
+				enterK: 'requestFullscreen',
+				exitK: 'exitFullscreen',
+				elementK: 'fullscreenElement',
+				eventK: tF
+			};
+
+		} else if(dE.mozRequestFullScreen ) {
+			api = {
+				enterK: 'mozRequestFullScreen',
+				exitK: 'mozCancelFullScreen',
+				elementK: 'mozFullScreenElement',
+				eventK: 'moz' + tF
+			};
+
+			
+
+		} else if(dE.webkitRequestFullscreen) {
+			api = {
+				enterK: 'webkitRequestFullscreen',
+				exitK: 'webkitExitFullscreen',
+				elementK: 'webkitFullscreenElement',
+				eventK: 'webkit' + tF
+			};
+
+		} else if(dE.msRequestFullscreen) {
+			api = {
+				enterK: 'msRequestFullscreen',
+				exitK: 'msExitFullscreen',
+				elementK: 'msFullscreenElement',
+				eventK: 'MSFullscreenChange'
+			};
+		}
+
+		if(api) {
+			api.enter = function() { 
+				// disable close-on-scroll in fullscreen
+				_initalCloseOnScrollValue = _options.closeOnScroll; 
+				_options.closeOnScroll = false; 
+
+				if(this.enterK === 'webkitRequestFullscreen') {
+					pswp.template[this.enterK]( Element.ALLOW_KEYBOARD_INPUT );
+				} else {
+					return pswp.template[this.enterK](); 
+				}
+			};
+			api.exit = function() { 
+				_options.closeOnScroll = _initalCloseOnScrollValue;
+
+				return document[this.exitK](); 
+
+			};
+			api.isFullscreen = function() { return document[this.elementK]; };
+		}
+
+		return api;
+	};
+
+
+
+};
+return PhotoSwipeUI_Default;
+
+
+});

static/ps.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="photoswipe/photoswipe-4.1.3.css">
+        <link rel="stylesheet" href="photoswipe/default-skin/default-skin.css">
+        <style>
+.pswp__img--placeholder--blank{
+    display: none;
+}
+
+        </style>
+    </head>
+    <body>
+        <div id="images">
+            <img src="images/thumbnails/1/0/0/0/000000000001.jpg" />
+            <img src="images/thumbnails/2/0/0/0/000000000002.jpg" />
+            <img src="images/thumbnails/3/0/0/0/000000000003.jpg" />
+        </div>
+
+        <div class="pswp" id="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+            <!-- Background of PhotoSwipe. 
+                 It's a separate element as animating opacity is faster than rgba(). -->
+            <div class="pswp__bg"></div>
+        
+            <!-- Slides wrapper with overflow:hidden. -->
+            <div class="pswp__scroll-wrap">
+        
+                <!-- Container that holds slides. 
+                    PhotoSwipe keeps only 3 of them in the DOM to save memory.
+                    Don't modify these 3 pswp__item elements, data is added later on. -->
+                <div class="pswp__container">
+                    <div class="pswp__item"></div>
+                    <div class="pswp__item"></div>
+                    <div class="pswp__item"></div>
+                </div>
+        
+                <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+                <div class="pswp__ui pswp__ui--hidden">
+        
+                    <div class="pswp__top-bar">
+        
+                        <!--  Controls are self-explanatory. Order can be changed. -->
+        
+                        <div class="pswp__counter"></div>
+        
+                        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+        
+                        <!--<button class="pswp__button pswp__button--share" title="Share"></button>-->
+        
+        
+                        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+        
+                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+        
+                        <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
+                        <!-- element will get class pswp__preloader--active when preloader is running -->
+                        <div class="pswp__preloader">
+                            <div class="pswp__preloader__icn">
+                              <div class="pswp__preloader__cut">
+                                <div class="pswp__preloader__donut"></div>
+                              </div>
+                            </div>
+                        </div>
+                    </div>
+        
+                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+                    </button>
+        
+                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+                    </button>
+        
+                    <div class="pswp__caption">
+                        <div class="pswp__caption__center"></div>
+                    </div>
+        
+                </div>
+        
+            </div>
+        
+        </div>
+
+        <script src="photoswipe/photoswipe-4.1.3.min.js"></script>
+        <script src="photoswipe/photoswipe-ui-default-4.1.3.min.js"></script>
+
+        <script>
+
+function openPhotoSwipe(el){
+    
+    // let data = store.data;
+
+    let pinId = el.getAttribute("data-pinid");
+
+    let pswpElement = document.getElementById("pswp");
+
+    let selectedIndex = 0;
+
+    var items = [];
+    let images = document.getElementById("images").querySelectorAll("img");
+    for ( let i = 0; i < images.length; ++i ){
+        if ( el.src == images[i].src ){
+            selectedIndex = i;
+        }
+        items.push({
+            msrc: images[i].getAttribute('src'),
+            originalImage: {
+                src: images[i].getAttribute('src'),
+                w: images[i].offsetWidth,
+                h: images[i].offsetHeight
+            },
+            mediumImage: {
+                src: images[i].getAttribute('src'),
+                w: images[i].offsetWidth,
+                h: images[i].offsetHeight
+            }
+            
+        });
+    }
+
+    console.log(selectedIndex);
+    console.log(items);
+    // for ( let i = 0; i < data.board.pins.length; ++i ){
+    //     items.push({
+    //         originalImage: {
+    //             src: getOriginalImagePath(data.board.pins[i].id),
+    //             w: data.board.pins[i].originalWidth,
+    //             h: data.board.pins[i].originalHeight
+    //         },
+    //         mediumImage: {
+    //             src: getThumbnailImagePath(data.board.pins[i].id),
+    //             w: data.board.pins[i].thumbnailWidth,
+    //             h: data.board.pins[i].thumbnailHeight
+    //         }
+    //     });
+    // }
+
+    let options = {
+        index: selectedIndex,
+        loop: false,
+        bgOpacity: 0.85,
+        getThumbBoundsFn: function(index) {
+            // See Options->getThumbBoundsFn section of docs for more info
+            var thumbnail = el,
+                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+                rect = thumbnail.getBoundingClientRect(); 
+
+            return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
+        },
+        history: false
+    };
+
+    let gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+
+    let realViewportWidth,
+        useLargeImages = false,
+        firstResize = true,
+        imageSrcWillChange;
+
+    gallery.listen('beforeResize', function() {
+
+        var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
+        dpiRatio = Math.min(dpiRatio, 2.5);
+        realViewportWidth = gallery.viewportSize.x * dpiRatio;
+
+
+        // if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
+        //     if(!useLargeImages) {
+        //         useLargeImages = true;
+        //         imageSrcWillChange = true;
+        //     }
+            
+        // } else {
+        //     if(useLargeImages) {
+        //         useLargeImages = false;
+        //         imageSrcWillChange = true;
+        //     }
+        // }
+
+        if(imageSrcWillChange && !firstResize) {
+            gallery.invalidateCurrItems();
+        }
+
+        if(firstResize) {
+            firstResize = false;
+        }
+
+        imageSrcWillChange = false;
+
+    });
+
+    gallery.listen('gettingData', function(index, item) {
+        if( useLargeImages ) {
+            item.src = item.originalImage.src;
+            item.w = item.originalImage.w;
+            item.h = item.originalImage.h;
+        } else {
+            item.src = item.mediumImage.src;
+            item.w = item.mediumImage.w;
+            item.h = item.mediumImage.h;
+        }
+    });
+
+
+    gallery.init();
+}
+
+
+document.addEventListener('click', (evt) => {
+    console.log(evt);
+    if ( evt.target.tagName == "IMG" ){
+        openPhotoSwipe(evt.target);
+    }
+});
+
+        </script>
+
+    </body>
+</html>

static/utils.js

@@ -30,4 +30,124 @@ function parseQueryString(qs){
         }
     }
     return obj;
-}
+}
+
+let photoSwipeGallery = null;
+let isPhotoSwipeOpen = false;
+
+function closePhotoSwipe(){
+    photoSwipeGallery.close();
+    setTimeout( () => {
+        isPhotoSwipeOpen = false;
+    }, 10);
+}
+
+function openPhotoSwipe(pinId){
+    isPhotoSwipeOpen = true;
+    
+    let data = store.data;
+
+    let pswpElement = document.getElementById("pswp");
+
+    var items = [];
+    for ( let i = 0; i < data.board.pins.length; ++i ){
+        items.push({
+            msrc: getThumbnailImagePath(data.board.pins[i].id),
+            src: getThumbnailImagePath(data.board.pins[i].id),
+            w: data.board.pins[i].originalWidth,
+            h: data.board.pins[i].originalHeight,
+            title: data.board.pins[i].description,
+            pinId: data.board.pins[i].id,
+            siteUrl: data.board.pins[i].siteUrl,
+            originalImage: {
+                src: getOriginalImagePath(data.board.pins[i].id),
+                w: data.board.pins[i].originalWidth,
+                h: data.board.pins[i].originalHeight
+            },
+            mediumImage: {
+                src: getThumbnailImagePath(data.board.pins[i].id),
+                w: data.board.pins[i].originalWidth,
+                h: data.board.pins[i].originalHeight
+            }
+        });
+    }
+
+    let options = {
+        showAnimationDuration: 0,
+        hideAnimationDuration: 0,
+        clickToCloseNonZoomable: false,
+        closeOnScroll: false,
+        pinchToClose: false,
+        shareEl: false,
+        shareButtons: [],
+        index: getPinIndexById(pinId),
+        loop: false,
+        bgOpacity: 0.85,
+        
+        history: false
+    };
+
+    // if we want the zoom open animations
+    // options.getThumbBoundsFn: isThumbnailClick ? function(index) {
+    //     // See Options->getThumbBoundsFn section of docs for more info
+    //     var thumbnail = el,
+    //         pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+    //         rect = thumbnail.getBoundingClientRect(); 
+
+    //     return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
+    // } : null,
+
+    photoSwipeGallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+
+    let realViewportWidth,
+        useLargeImages = false,
+        firstResize = true,
+        imageSrcWillChange;
+
+        photoSwipeGallery.listen('beforeResize', function() {
+
+        var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
+        dpiRatio = Math.min(dpiRatio, 2.5);
+        realViewportWidth = photoSwipeGallery.viewportSize.x * dpiRatio;
+
+
+        if(realViewportWidth >= 1200 || (!photoSwipeGallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
+            if(!useLargeImages) {
+                useLargeImages = true;
+                imageSrcWillChange = true;
+            }
+            
+        } else {
+            if(useLargeImages) {
+                useLargeImages = false;
+                imageSrcWillChange = true;
+            }
+        }
+
+        if(imageSrcWillChange && !firstResize) {
+            photoSwipeGallery.invalidateCurrItems();
+        }
+
+        if(firstResize) {
+            firstResize = false;
+        }
+
+        imageSrcWillChange = false;
+
+    });
+
+    photoSwipeGallery.listen('gettingData', function(index, item) {
+        if( useLargeImages ) {
+            item.src = item.originalImage.src;
+            item.w = item.originalImage.w;
+            item.h = item.originalImage.h;
+        } else {
+            item.src = item.mediumImage.src;
+            item.w = item.mediumImage.w;
+            item.h = item.mediumImage.h;
+        }
+    });
+
+
+    photoSwipeGallery.init();
+}