feat: deepen single post experience

assets/js/page-template.js

@@ -177,7 +177,7 @@
 
   function initLightbox() {
     var overlay = document.getElementById('lightbox-overlay');
-    var content = document.querySelector(".entry-content[data-aksrt-lightbox='1']");
+    var content = document.querySelector(".wp-posts-content[data-aksrt-lightbox='1'], .entry-content[data-aksrt-lightbox='1']");
     if (!overlay || !content || overlay.dataset.aksrtLightboxBound === '1') return;
 
     overlay.dataset.aksrtLightboxBound = '1';
@@ -188,6 +188,7 @@
 
     function close() {
       overlay.classList.remove('is-open');
+      overlay.setAttribute('aria-hidden', 'true');
       document.body.style.overflow = '';
       if (image) {
         image.src = '';
@@ -196,11 +197,19 @@
     }
 
     content.querySelectorAll('img').forEach(function (img) {
-      img.style.cursor = 'zoom-in';
-      img.addEventListener('click', function () {
-        if (!image) return;
+      var link = img.closest('a[href]');
+      var linkHref = link ? link.href : '';
+      var linksToImage = /\.(?:avif|gif|jpe?g|png|svg|webp)(?:[?#].*)?$/i.test(linkHref);
+      if (img.closest('[data-no-lightbox]') || (link && !linksToImage)) return;
 
-        image.src = img.src;
+      img.classList.add('aksrt-lightbox-target');
+      img.addEventListener('click', function (event) {
+        if (!image) return;
+        if (linksToImage) event.preventDefault();
+
+        image.src = linksToImage
+          ? linkHref
+          : (img.getAttribute('data-src') || img.getAttribute('data-lazy-src') || img.currentSrc || img.src);
         image.alt = img.alt || '';
 
         if (caption) {
@@ -210,20 +219,18 @@
         }
 
         overlay.classList.add('is-open');
+        overlay.setAttribute('aria-hidden', 'false');
         document.body.style.overflow = 'hidden';
+        if (closeBtn) closeBtn.focus();
       });
     });
 
     overlay.addEventListener('click', function (event) {
-      if (event.target === overlay || event.target === closeBtn) {
+      if (event.target === overlay || event.target === closeBtn || (event.target.closest && event.target.closest('.lightbox-close'))) {
         close();
       }
     });
 
-    if (closeBtn) {
-      closeBtn.addEventListener('click', close);
-    }
-
     document.addEventListener('keydown', function (event) {
       if (event.key === 'Escape' && overlay.classList.contains('is-open')) {
         close();