(function() {
var initphotoswipefromdom = function(galleryselector) {
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),
author: el.getattribute('data-author')
};
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 === 'a';
});
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 + '
photo: ' + item.author + '';
return true;
}
};
if(fromurl) {
if(options.gallerypids) {
// parse real index when custom pids are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
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);
// see: http://photoswipe.com/documentation/responsive-images.html
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;
item.src = item.o.src;
item.w = item.o.w;
item.h = item.o.h;
}
});
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 );
}
};
initphotoswipefromdom('.demo-gallery');
})();