add photoswipe to config files

Author: ojf

_config.yml

@@ -522,6 +522,13 @@ third_party_libraries:
     url:
       js: "https://cdn.jsdelivr.net/npm/mermaid@{{version}}/dist/mermaid.min.js"
     version: "10.7.0"
+      photoswipe:
+    integrity:
+      js: "sha256-VCBpdxvrNNxGHNuTdNqK9kPFkev2XY7DYzHdmgaB69Q="
+    url:
+      css: "https://cdn.jsdelivr.net/npm/photoswipe@{{version}}/dist/photoswipe.min.css"
+      js: "https://cdn.jsdelivr.net/npm/photoswipe@{{version}}/dist/photoswipe.esm.min.js"
+    version: "5.4.4"
   polyfill:
     url:
       js: "https://cdnjs.cloudflare.com/polyfill/v{{version}}/polyfill.min.js?features=es6"

_includes/head.liquid

@@ -131,6 +131,15 @@
       integrity="{{ site.third_party_libraries.img-comparison-slider.integrity.css }}"
       crossorigin="anonymous"
     >
+  {% endif %}
+    <!-- Photoswipe -->
+    {% if page.images.photoswipe %}
+    <link
+      defer
+      rel="stylesheet"
+      href="{{ site.third_party_libraries.photoswipe.url.css }}"
+      crossorigin="anonymous"
+    >
   {% endif %}
   <!-- Image slider -->
   {% if page.images.slider %}

_scripts/photoswipe-setup.js

@@ -0,0 +1,11 @@
+---
+permalink: /assets/js/photoswipe-setup.js
+---
+import PhotoSwipeLightbox from "{{ site.third_party_libraries.photoswipe-lightbox.url.js }}";
+import PhotoSwipe from "{{ site.third_party_libraries.photoswipe.url.js }}";
+const photoswipe = new PhotoSwipeLightbox({
+  gallery: ".pswp-gallery",
+  children: "a",
+  pswpModule: PhotoSwipe,
+});
+photoswipe.init();