0xMRTT
a8795e12b0
All checks were successful
black-action / runner / black formatter (push) Successful in -1m14s
98 lines
2.9 KiB
JavaScript
98 lines
2.9 KiB
JavaScript
var slides = {}
|
|
|
|
function createSlides() {
|
|
$("a.gallery-photo").each(function (photo_id, photo) {
|
|
var slide = {
|
|
w: photo.getAttribute('data-width'),
|
|
h: photo.getAttribute('data-height'),
|
|
msrc: photo.getElementsByTagName('img')[0].getAttribute('src'),
|
|
title: photo.getElementsByTagName('img')[0].getAttribute('alt'),
|
|
date: photo.getAttribute('data-date'),
|
|
};
|
|
|
|
if (photo.getAttribute('data-type') == 'image')
|
|
slide['src'] = photo.getAttribute('href');
|
|
else
|
|
slide['html'] = '<video style="margin: 0px auto; height: 100%; max-width: 100%; max-height: 100%; display: block" data-index="' + photo.getAttribute('data-index') +
|
|
'" controls><source src="' + photo.getAttribute('href') + '" type="video/mp4"></video>';
|
|
|
|
var gallery_id = photo.getAttribute('data-gallery');
|
|
if (!(gallery_id in slides))
|
|
slides[gallery_id] = [];
|
|
|
|
slides[gallery_id].push(slide);
|
|
});
|
|
}
|
|
|
|
function getThumbBounds(gallery, index) {
|
|
var thumbnail = $('div.gallery a[data-gallery="'+gallery+'"][data-index="'+index+'"]')[0];
|
|
var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
|
|
var rect = thumbnail.getBoundingClientRect();
|
|
return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
|
|
}
|
|
|
|
function addCaptionHTML(item, captionEl, isFake) {
|
|
if(!item.title && !item.date) {
|
|
captionEl.children[0].innerText = '';
|
|
return false;
|
|
}
|
|
captionEl.children[0].innerHTML = item.title;
|
|
if (item.date) {
|
|
captionEl.children[0].innerHTML += '<p class="caption-date">' + item.date + '</p>';
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function openPhotoSwipe() {
|
|
var index = parseInt($(this).attr('data-index'))
|
|
var gallery_id = $(this).attr('data-gallery')
|
|
|
|
var options = {
|
|
index: index,
|
|
getThumbBoundsFn: function (id) { return getThumbBounds(gallery_id, id) },
|
|
addCaptionHTMLFn: addCaptionHTML,
|
|
preload: [2,5],
|
|
zoomEl: false,
|
|
shareEl: true,
|
|
barsSize: {top:0, bottom:0},
|
|
bgOpacity: 1,
|
|
loop: false,
|
|
mainClass: 'pswp--minimal--dark',
|
|
shareButtons: [
|
|
{id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
|
|
],
|
|
};
|
|
|
|
var gallery = new PhotoSwipe( $('.pswp')[0], PhotoSwipeUI_Default, slides[gallery_id], options);
|
|
|
|
gallery.listen('initialZoomOut', function() {
|
|
if (this.currItem.html) {
|
|
var videos = $('div.pswp__item video[data-index='+this.getCurrentIndex()+']')
|
|
if (videos.length > 0)
|
|
videos[0].pause()
|
|
}
|
|
});
|
|
|
|
gallery.listen('afterChange', function() {
|
|
var videos = $('div.pswp__item video')
|
|
for (var i=0; i<videos.length; ++i)
|
|
videos[i].pause()
|
|
|
|
if (this.currItem.html) {
|
|
var videos = $('div.pswp__item video[data-index='+this.getCurrentIndex()+']')
|
|
if (videos.length > 0)
|
|
videos[0].play()
|
|
}
|
|
});
|
|
|
|
gallery.init();
|
|
|
|
return false;
|
|
}
|
|
|
|
|
|
$( document ).ready(function() {
|
|
createSlides()
|
|
$('div.gallery a').on('click', openPhotoSwipe)
|
|
});
|