104 lines
3.5 KiB
JavaScript
104 lines
3.5 KiB
JavaScript
function lightbox(trigger) {
|
|
var onThumbnailsClick = function (e) {
|
|
e.preventDefault();
|
|
|
|
var items = [];
|
|
var index = 0;
|
|
|
|
var prevSibling = e.target.closest('.kg-card').previousElementSibling;
|
|
|
|
while (prevSibling && (prevSibling.classList.contains('kg-image-card') || prevSibling.classList.contains('kg-gallery-card'))) {
|
|
var prevItems = [];
|
|
|
|
prevSibling.querySelectorAll('img').forEach(function (item) {
|
|
prevItems.push({
|
|
src: item.getAttribute('src'),
|
|
msrc: item.getAttribute('src'),
|
|
w: item.getAttribute('width'),
|
|
h: item.getAttribute('height'),
|
|
el: item,
|
|
})
|
|
|
|
index += 1;
|
|
});
|
|
prevSibling = prevSibling.previousElementSibling;
|
|
|
|
items = prevItems.concat(items);
|
|
}
|
|
|
|
if (e.target.classList.contains('kg-image')) {
|
|
items.push({
|
|
src: e.target.getAttribute('src'),
|
|
msrc: e.target.getAttribute('src'),
|
|
w: e.target.getAttribute('width'),
|
|
h: e.target.getAttribute('height'),
|
|
el: e.target,
|
|
});
|
|
} else {
|
|
var reachedCurrentItem = false;
|
|
|
|
e.target.closest('.kg-gallery-card').querySelectorAll('img').forEach(function (item) {
|
|
items.push({
|
|
src: item.getAttribute('src'),
|
|
msrc: item.getAttribute('src'),
|
|
w: item.getAttribute('width'),
|
|
h: item.getAttribute('height'),
|
|
el: item,
|
|
});
|
|
|
|
if (!reachedCurrentItem && item !== e.target) {
|
|
index += 1;
|
|
} else {
|
|
reachedCurrentItem = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
var nextSibling = e.target.closest('.kg-card').nextElementSibling;
|
|
|
|
while (nextSibling && (nextSibling.classList.contains('kg-image-card') || nextSibling.classList.contains('kg-gallery-card'))) {
|
|
nextSibling.querySelectorAll('img').forEach(function (item) {
|
|
items.push({
|
|
src: item.getAttribute('src'),
|
|
msrc: item.getAttribute('src'),
|
|
w: item.getAttribute('width'),
|
|
h: item.getAttribute('height'),
|
|
el: item,
|
|
})
|
|
});
|
|
nextSibling = nextSibling.nextElementSibling;
|
|
}
|
|
|
|
var pswpElement = document.querySelectorAll('.pswp')[0];
|
|
|
|
var options = {
|
|
bgOpacity: 0.9,
|
|
closeOnScroll: true,
|
|
fullscreenEl: false,
|
|
history: false,
|
|
index: index,
|
|
shareEl: false,
|
|
zoomEl: false,
|
|
getThumbBoundsFn: function(index) {
|
|
var thumbnail = items[index].el,
|
|
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
|
|
rect = thumbnail.getBoundingClientRect();
|
|
|
|
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
|
|
}
|
|
}
|
|
|
|
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
|
|
gallery.init();
|
|
|
|
return false;
|
|
};
|
|
|
|
var triggers = document.querySelectorAll(trigger);
|
|
triggers.forEach(function (trig) {
|
|
trig.addEventListener('click', function (e) {
|
|
onThumbnailsClick(e);
|
|
});
|
|
});
|
|
}
|