99 lines
3.3 KiB
JavaScript
99 lines
3.3 KiB
JavaScript
|
(function () {
|
||
|
|
const lightbox = document.getElementById('lightbox');
|
||
|
|
const content = document.getElementById('lightbox-content');
|
||
|
|
const image = document.getElementById('lightbox-image');
|
||
|
|
const title = document.getElementById('lightbox-title');
|
||
|
|
const desc = document.getElementById('lightbox-desc');
|
||
|
|
const counter = document.getElementById('lightbox-counter');
|
||
|
|
const prevBtn = document.getElementById('lightbox-prev');
|
||
|
|
const nextBtn = document.getElementById('lightbox-next');
|
||
|
|
const closeBtn = document.getElementById('lightbox-close');
|
||
|
|
|
||
|
|
let images = [];
|
||
|
|
let current = 0;
|
||
|
|
let touchStartX = 0;
|
||
|
|
|
||
|
|
function open(imgArray, titleKey, descKey) {
|
||
|
|
images = imgArray;
|
||
|
|
current = 0;
|
||
|
|
|
||
|
|
const lang = localStorage.getItem('lang') || 'ru';
|
||
|
|
title.textContent = translations[lang][titleKey] || '';
|
||
|
|
title.dataset.i18n = titleKey;
|
||
|
|
desc.textContent = translations[lang][descKey] || '';
|
||
|
|
desc.dataset.i18n = descKey;
|
||
|
|
|
||
|
|
updateImage();
|
||
|
|
updateNav();
|
||
|
|
lightbox.classList.add('open');
|
||
|
|
document.body.style.overflow = 'hidden';
|
||
|
|
}
|
||
|
|
|
||
|
|
function close() {
|
||
|
|
lightbox.classList.remove('open');
|
||
|
|
document.body.style.overflow = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
function goTo(index) {
|
||
|
|
current = (index + images.length) % images.length;
|
||
|
|
updateImage();
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateImage() {
|
||
|
|
image.src = images[current];
|
||
|
|
if (images.length > 1) {
|
||
|
|
counter.textContent = (current + 1) + ' / ' + images.length;
|
||
|
|
counter.style.display = '';
|
||
|
|
} else {
|
||
|
|
counter.style.display = 'none';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateNav() {
|
||
|
|
const multi = images.length > 1;
|
||
|
|
prevBtn.style.display = multi ? '' : 'none';
|
||
|
|
nextBtn.style.display = multi ? '' : 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Close handlers
|
||
|
|
closeBtn.addEventListener('click', close);
|
||
|
|
lightbox.addEventListener('click', function (e) {
|
||
|
|
if (e.target === lightbox) close();
|
||
|
|
});
|
||
|
|
content.addEventListener('click', function (e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Navigation
|
||
|
|
prevBtn.addEventListener('click', function () { goTo(current - 1); });
|
||
|
|
nextBtn.addEventListener('click', function () { goTo(current + 1); });
|
||
|
|
|
||
|
|
// Keyboard
|
||
|
|
document.addEventListener('keydown', function (e) {
|
||
|
|
if (!lightbox.classList.contains('open')) return;
|
||
|
|
if (e.key === 'Escape') { close(); e.preventDefault(); }
|
||
|
|
if (e.key === 'ArrowLeft') { goTo(current - 1); e.preventDefault(); }
|
||
|
|
if (e.key === 'ArrowRight') { goTo(current + 1); e.preventDefault(); }
|
||
|
|
});
|
||
|
|
|
||
|
|
// Touch swipe
|
||
|
|
lightbox.addEventListener('touchstart', function (e) {
|
||
|
|
touchStartX = e.changedTouches[0].screenX;
|
||
|
|
}, { passive: true });
|
||
|
|
|
||
|
|
lightbox.addEventListener('touchend', function (e) {
|
||
|
|
var diff = touchStartX - e.changedTouches[0].screenX;
|
||
|
|
if (Math.abs(diff) > 50) {
|
||
|
|
goTo(diff > 0 ? current + 1 : current - 1);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initialize triggers
|
||
|
|
document.querySelectorAll('[data-lightbox]').forEach(function (el) {
|
||
|
|
el.addEventListener('click', function () {
|
||
|
|
var imgs = JSON.parse(el.dataset.lightboxImages);
|
||
|
|
open(imgs, el.dataset.lightboxTitle, el.dataset.lightboxDesc);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
})();
|