Added color switching, moved scripts into dedicated files

2026-08-13 14:59:41 +02:00
parent add49ba73c
commit 4e1ab6da3c
6 changed files with 371 additions and 94 deletions
@@ -0,0 +1,63 @@
+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">Figure ' + 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 = '';
+    }
+  });
+});