Added support for Venobox

Signed-off-by: George Araújo <[email protected]>
alshedivat · Dec 4, 2024 · 72ebd25 · 72ebd25
1 parent 58e766b
commit 72ebd25
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/_config.yml b/_config.yml
@@ -656,6 +656,14 @@ third_party_libraries:
       js: "https://cdn.jsdelivr.net/npm/vega-lite@{{version}}/build/vega-lite.min.js"
       js_map: "https://cdn.jsdelivr.net/npm/vega-lite@{{version}}/build/vega-lite.min.js.map"
     version: "5.16.3"
+  venobox:
+    integrity:
+      css: "sha256-ohJEB0/WsBOdBD+gQO/MGfyJSbTUI8OOLbQGdkxD6Cg="
+      js: "sha256-LsGXHsHMMmTcz3KqTaWvLv6ome+7pRiic2LPnzTfiSo="
+    url:
+      css: "https://cdn.jsdelivr.net/npm/venobox@{{version}}/dist/venobox.min.css"
+      js: "https://cdn.jsdelivr.net/npm/venobox@{{version}}/dist/venobox.min.js"
+    version: "2.1.8"
 
 # -----------------------------------------------------------------------------
 # Get external JSON data

diff --git a/_includes/head.liquid b/_includes/head.liquid
@@ -171,6 +171,16 @@
       crossorigin="anonymous"
     >
   {% endif %}
+  <!-- Venobox -->
+  {% if page.images.venobox %}
+    <link
+      defer
+      rel="stylesheet"
+      href="{{ site.third_party_libraries.venobox.url.css }}"
+      integrity="{{ site.third_party_libraries.venobox.integrity.css }}"
+      crossorigin="anonymous"
+    >
+  {% endif %}
 {% endif %}
 
 {% if page.tikzjax %}

diff --git a/_includes/scripts/imageLayouts.liquid b/_includes/scripts/imageLayouts.liquid
@@ -42,5 +42,19 @@
       crossorigin="anonymous"
     ></script>
   {% endif %}
-
+  {% if page.images.venobox %}
+    <script
+      defer
+      src="{{ site.third_party_libraries.venobox.url.js }}"
+      integrity="{{ site.third_party_libraries.venobox.integrity.js }}"
+      crossorigin="anonymous"
+    ></script>
+    <script>
+      document.addEventListener('readystatechange', () => {
+        if (document.readyState === 'complete') {
+          new VenoBox();
+        }
+      });
+    </script>
+  {% endif %}
 {% endif %}
diff --git a/_posts/2024-12-04-photo-gallery.md b/_posts/2024-12-04-photo-gallery.md
@@ -10,6 +10,7 @@ images:
   lightbox2: true
   photoswipe: true
   spotlight: true
+  venobox: true
 
 ---
 The images in this post are all zoomable, arranged into different mini-galleries using different libraries.
@@ -85,4 +86,12 @@ The images in this post are all zoomable, arranged into different mini-galleries
     <a class="spotlight" href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-2500.jpg">
         <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-200.jpg" />
     </a>
-</div>
+</div>
+
+---
+
+## [Venobox](https://veno.es/venobox/)
+
+<a class="venobox" data-gall="myGallery" href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-2500.jpg"><img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-200.jpg" /></a>
+<a class="venobox" data-gall="myGallery" href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"><img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg" /></a>
+<a class="venobox" data-gall="myGallery" href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg"><img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg" /></a>