static/js/photoswipe-index.js

   1 var initPhotoSwipeFromDOM = function(gallerySelector) {
   2
   3     // parse slide data (url, title, size ...) from DOM elements
   4     // (children of gallerySelector)
   5     var parseThumbnailElements = function(el) {
   6         var thumbElements = el.childNodes,
   7             numNodes = thumbElements.length,
   8             items = [],
   9             figureEl,
  10             linkEl,
  11             size,
  12             item;
  13
  14         for(var i = 0; i < numNodes; i++) {
  15
  16             figureEl = thumbElements[i]; // <figure> element
  17
  18             // include only element nodes
  19             if(figureEl.nodeType !== 1) {
  20                 continue;
  21             }
  22
  23             linkEl = figureEl.children[0]; // <a> element
  24
  25             size = linkEl.getAttribute('data-size').split('x');
  26
  27             // create slide object
  28             item = {
  29                 src: linkEl.getAttribute('href'),
  30                 w: parseInt(size[0], 10),
  31                 h: parseInt(size[1], 10)
  32             };
  33
  34
  35
  36             if(figureEl.children.length > 1) {
  37                 // <figcaption> content
  38                 item.title = figureEl.children[1].innerHTML;
  39             }
  40
  41             if(linkEl.children.length > 0) {
  42                 // <img> thumbnail element, retrieving thumbnail url
  43                 item.msrc = linkEl.children[0].getAttribute('src');
  44             }
  45
  46             item.el = figureEl; // save link to element for getThumbBoundsFn
  47             items.push(item);
  48         }
  49
  50         return items;
  51     };
  52
  53     // find nearest parent element
  54     var closest = function closest(el, fn) {
  55         return el && ( fn(el) ? el : closest(el.parentNode, fn) );
  56     };
  57
  58     // triggers when user clicks on thumbnail
  59     var onThumbnailsClick = function(e) {
  60         e = e || window.event;
  61         e.preventDefault ? e.preventDefault() : e.returnValue = false;
  62
  63         var eTarget = e.target || e.srcElement;
  64
  65         // find root element of slide
  66         var clickedListItem = closest(eTarget, function(el) {
  67             return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
  68         });
  69
  70         if(!clickedListItem) {
  71             return;
  72         }
  73
  74         // find index of clicked item by looping through all child nodes
  75         // alternatively, you may define index via data- attribute
  76         var clickedGallery = clickedListItem.parentNode,
  77             childNodes = clickedListItem.parentNode.childNodes,
  78             numChildNodes = childNodes.length,
  79             nodeIndex = 0,
  80             index;
  81
  82         for (var i = 0; i < numChildNodes; i++) {
  83             if(childNodes[i].nodeType !== 1) {
  84                 continue;
  85             }
  86
  87             if(childNodes[i] === clickedListItem) {
  88                 index = nodeIndex;
  89                 break;
  90             }
  91             nodeIndex++;
  92         }
  93
  94
  95
  96         if(index >= 0) {
  97             // open PhotoSwipe if valid index found
  98             openPhotoSwipe( index, clickedGallery );
  99         }
 100         return false;
 101     };
 102
 103     // parse picture index and gallery index from URL (#&pid=1&gid=2)
 104     var photoswipeParseHash = function() {
 105         var hash = window.location.hash.substring(1),
 106         params = {};
 107
 108         if(hash.length < 5) {
 109             return params;
 110         }
 111
 112         var vars = hash.split('&');
 113         for (var i = 0; i < vars.length; i++) {
 114             if(!vars[i]) {
 115                 continue;
 116             }
 117             var pair = vars[i].split('=');
 118             if(pair.length < 2) {
 119                 continue;
 120             }
 121             params[pair[0]] = pair[1];
 122         }
 123
 124         if(params.gid) {
 125             params.gid = parseInt(params.gid, 10);
 126         }
 127
 128         return params;
 129     };
 130
 131     var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
 132         var pswpElement = document.querySelectorAll('.pswp')[0],
 133             gallery,
 134             options,
 135             items;
 136
 137         items = parseThumbnailElements(galleryElement);
 138
 139         // define options (if needed)
 140         options = {
 141
 142             // define gallery index (for URL)
 143             galleryUID: galleryElement.getAttribute('data-pswp-uid'),
 144
 145             getThumbBoundsFn: function(index) {
 146                 // See Options -> getThumbBoundsFn section of documentation for more info
 147                 var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
 148                     pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
 149                     rect = thumbnail.getBoundingClientRect();
 150
 151                 return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
 152             }
 153
 154         };
 155
 156         // PhotoSwipe opened from URL
 157         if(fromURL) {
 158             if(options.galleryPIDs) {
 159                 // parse real index when custom PIDs are used
 160                 // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
 161                 for(var j = 0; j < items.length; j++) {
 162                     if(items[j].pid == index) {
 163                         options.index = j;
 164                         break;
 165                     }
 166                 }
 167             } else {
 168                 // in URL indexes start from 1
 169                 options.index = parseInt(index, 10) - 1;
 170             }
 171         } else {
 172             options.index = parseInt(index, 10);
 173         }
 174
 175         // exit if index not found
 176         if( isNaN(options.index) ) {
 177             return;
 178         }
 179
 180         if(disableAnimation) {
 181             options.showAnimationDuration = 0;
 182         }
 183
 184         // Pass data to PhotoSwipe and initialize it
 185         gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
 186         gallery.init();
 187     };
 188
 189     // loop through all gallery elements and bind events
 190     var galleryElements = document.querySelectorAll( gallerySelector );
 191
 192     for(var i = 0, l = galleryElements.length; i < l; i++) {
 193         galleryElements[i].setAttribute('data-pswp-uid', i+1);
 194         galleryElements[i].onclick = onThumbnailsClick;
 195     }
 196
 197     // Parse URL and open gallery if it contains #&pid=3&gid=1
 198     var hashData = photoswipeParseHash();
 199     if(hashData.pid && hashData.gid) {
 200         openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
 201     }
 202 };
 203
 204 // execute above function
 205 initPhotoSwipeFromDOM('.my-gallery');