64 lines
2.1 KiB
JavaScript
64 lines
2.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const overlay = document.getElementById('lightbox-overlay');
|
|
const mediaContainer = document.getElementById('lightbox-media');
|
|
const overlayCaption = document.getElementById('lightbox-caption');
|
|
|
|
function openLightboxWithImg(src, alt, figureNumber, captionText) {
|
|
mediaContainer.innerHTML = '';
|
|
const img = document.createElement('img');
|
|
img.src = src;
|
|
img.alt = alt;
|
|
mediaContainer.appendChild(img);
|
|
setCaption(figureNumber, captionText);
|
|
overlay.classList.add('active');
|
|
}
|
|
|
|
function openLightboxWithSvg(svgEl, figureNumber, captionText) {
|
|
mediaContainer.innerHTML = '';
|
|
const svgClone = svgEl.cloneNode(true);
|
|
mediaContainer.appendChild(svgClone);
|
|
setCaption(figureNumber, captionText);
|
|
overlay.classList.add('active');
|
|
}
|
|
|
|
function setCaption(figureNumber, captionText) {
|
|
overlayCaption.innerHTML = captionText
|
|
? '<span class="fig-number" data-num="' + figureNumber + '"></span> ' + captionText
|
|
: '';
|
|
}
|
|
|
|
document.querySelectorAll('.entry-content img').forEach(function (img, index) {
|
|
const figureNumber = index + 1;
|
|
const originalSrc = img.src;
|
|
const originalAlt = img.alt;
|
|
const captionEl = img.nextElementSibling;
|
|
const captionText = (captionEl && captionEl.tagName === 'EM') ? captionEl.textContent : '';
|
|
|
|
img.addEventListener('click', function () {
|
|
openLightboxWithImg(originalSrc, originalAlt, figureNumber, captionText);
|
|
});
|
|
});
|
|
|
|
document.addEventListener('svg-injected', function (e) {
|
|
const svgEl = e.detail.svgEl;
|
|
svgEl.style.cursor = 'zoom-in';
|
|
svgEl.addEventListener('click', function () {
|
|
openLightboxWithSvg(svgEl, e.detail.figureNumber, e.detail.captionText);
|
|
});
|
|
});
|
|
|
|
overlay.addEventListener('click', function () {
|
|
overlay.classList.remove('active');
|
|
mediaContainer.innerHTML = '';
|
|
overlayCaption.innerHTML = '';
|
|
});
|
|
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') {
|
|
overlay.classList.remove('active');
|
|
mediaContainer.innerHTML = '';
|
|
overlayCaption.innerHTML = '';
|
|
}
|
|
});
|
|
});
|