Add photoswipe lightbox for images in blog articles.

ivelum · Dec 19, 2024 · a2dfe2c · a2dfe2c
1 parent 4d7589d
commit a2dfe2c
Show file tree

Hide file tree

Showing 5 changed files with 449 additions and 0 deletions.
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -6,6 +6,10 @@
   <script type="module">
     import '/js/prettify.js';
   </script>
+  <script src="/vendor/photoswipe-lightbox.umd.min.js"></script>
+  <script src="/vendor/photoswipe.umd.min.js"></script>
+  <link rel="stylesheet" href="/vendor/photoswipe.css">
+  <script src="/js/lightbox.js"></script>
   <div class="page article">
     <div class="article--back">
       <a class="article--back-link" href="/blog/">

diff --git a/static/js/lightbox.js b/static/js/lightbox.js
@@ -0,0 +1,15 @@
+window.addEventListener("load", function () {
+  document.querySelectorAll('img').forEach(function (img) {
+    if (img.parentNode.tagName === "A") {
+      img.parentNode.setAttribute("data-pswp-width", img.naturalWidth);
+      img.parentNode.setAttribute("data-pswp-height", img.naturalHeight);
+    }
+  });
+
+  const options = {
+    gallery: '.narrow-container a',
+    pswpModule: PhotoSwipe
+  };
+  const lightbox = new PhotoSwipeLightbox(options);
+  lightbox.init();
+});
diff --git a/static/vendor/photoswipe-lightbox.umd.min.js b/static/vendor/photoswipe-lightbox.umd.min.js