34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
var items = [];
|
|
document.querySelectorAll('figure').forEach(function ($figure, index) {
|
|
if ($figure.className == 'no-photoswipe') return true;
|
|
var $a = $figure.querySelector('a'),
|
|
$img = $figure.querySelector('img'),
|
|
$src = $a.href,
|
|
$title = $img.alt,
|
|
$msrc = $img.src;
|
|
var $size = $a.dataset.size.split('x');
|
|
var item = {
|
|
src: $src,
|
|
w: $size[0],
|
|
h: $size[1],
|
|
title: $title,
|
|
msrc: $msrc
|
|
};
|
|
items.push(item);
|
|
// Event handler for click on a figure
|
|
$figure.addEventListener('click', function (event) {
|
|
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
|
|
// Get the PSWP element and initialize it with the desired options
|
|
var $pswp = document.querySelector('.pswp');
|
|
var options = {
|
|
index: index,
|
|
bgOpacity: 0.8,
|
|
showHideOpacity: true,
|
|
shareEl: false
|
|
};
|
|
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
|
|
}, false);
|
|
});
|
|
}, false);
|