var initphotoswipefromdom = function(galleryselector,classname) { var parsethumbnailelements = function(el) { var thumbelements = el.childnodes, numnodes = thumbelements.length, items = [], el, childelements, thumbnailel, size, item; for(var i = 0; i < numnodes; i++) { el = thumbelements[i]; // include only element nodes if(el.nodetype !== 1) { continue; } childelements = el.children; size = el.getattribute('data-size').split('x'); // create slide object item = { src: el.getattribute('href'), w: parseint(size[0], 10), h: parseint(size[1], 10) }; item.el = el; // save link to element for getthumbboundsfn if(childelements.length > 0) { item.msrc = childelements[0].getattribute('src'); // thumbnail url if(childelements.length > 1) { item.title = childelements[1].innerhtml; // caption (contents of figure) } } // // var mediumsrc = el.getattribute('data-med'); // if(mediumsrc) { // size = el.getattribute('data-med-size').split('x'); // // "medium-sized" image // item.m = { // src: mediumsrc, // w: parseint(size[0], 10), // h: parseint(size[1], 10) // }; // } // // original image // item.o = { // src: item.src, // w: item.w, // h: item.h // }; items.push(item); } return items; }; // find nearest parent element var closest = function closest(el, fn) { return el && ( fn(el) ? el : closest(el.parentnode, fn) ); }; var onthumbnailsclick = function(e) { e = e || window.event; e.preventdefault ? e.preventdefault() : e.returnvalue = false; var etarget = e.target || e.srcelement; var clickedlistitem = closest(etarget, function(el) { return el.tagname === classname; }); if(!clickedlistitem) { return; } var clickedgallery = clickedlistitem.parentnode; var childnodes = clickedlistitem.parentnode.childnodes, numchildnodes = childnodes.length, nodeindex = 0, index; for (var i = 0; i < numchildnodes; i++) { if(childnodes[i].nodetype !== 1) { continue; } if(childnodes[i] === clickedlistitem) { index = nodeindex; break; } nodeindex++; } if(index >= 0) { openphotoswipe( index, clickedgallery ); } return false; }; var photoswipeparsehash = function() { var hash = window.location.hash.substring(1), params = {}; if(hash.length < 5) { // pid=1 return params; } var vars = hash.split('&'); for (var i = 0; i < vars.length; i++) { if(!vars[i]) { continue; } var pair = vars[i].split('='); if(pair.length < 2) { continue; } params[pair[0]] = pair[1]; } if(params.gid) { params.gid = parseint(params.gid, 10); } return params; }; var openphotoswipe = function(index, galleryelement, disableanimation, fromurl) { var pswpelement = document.queryselectorall('.pswp')[0], gallery, options, items; items = parsethumbnailelements(galleryelement); // define options (if needed) options = { galleryuid: galleryelement.getattribute('data-pswp-uid'), getthumbboundsfn: function(index) { // see options->getthumbboundsfn section of docs for more info var thumbnail = items[index].el.children[0], pageyscroll = window.pageyoffset || document.documentelement.scrolltop, rect = thumbnail.getboundingclientrect(); return {x:rect.left, y:rect.top + pageyscroll, w:rect.width}; }, addcaptionhtmlfn: function(item, captionel, isfake) { if(!item.title) { captionel.children[0].innertext = ''; return false; } captionel.children[0].innerhtml = item.title ; return true; } }; if(fromurl) { if(options.gallerypids) { for(var j = 0; j < items.length; j++) { if(items[j].pid == index) { options.index = j; break; } } } else { options.index = parseint(index, 10) - 1; } } else { options.index = parseint(index, 10); } // exit if index not found if( isnan(options.index) ) { return; } var radios = document.getelementsbyname('gallery-style'); for (var i = 0, length = radios.length; i < length; i++) { if (radios[i].checked) { if(radios[i].id == 'radio-all-controls') { } else if(radios[i].id == 'radio-minimal-black') { options.mainclass = 'pswp--minimal--dark'; options.barssize = {top:0,bottom:0}; options.captionel = false; options.fullscreenel = false; options.shareel = false; options.bgopacity = 0.85; options.taptoclose = true; options.taptotogglecontrols = false; } break; } } if(disableanimation) { options.showanimationduration = 0; } // pass data to photoswipe and initialize it gallery = new photoswipe( pswpelement, photoswipeui_default, items, options); gallery.init(); }; // select all gallery elements var galleryelements = document.queryselectorall( galleryselector ); for(var i = 0, l = galleryelements.length; i < l; i++) { galleryelements[i].setattribute('data-pswp-uid', i+1); galleryelements[i].onclick = onthumbnailsclick; } // parse url and open gallery if it contains #&pid=3&gid=1 var hashdata = photoswipeparsehash(); if(hashdata.pid && hashdata.gid) { openphotoswipe( hashdata.pid, galleryelements[ hashdata.gid - 1 ], true, true ); } };