Added image zoom

docs/assets/css/custom.css

@@ -5,3 +5,36 @@ ul li li {
 ul li li li {
   list-style-type: square;
 }
+
+.responsive-image {
+  cursor: zoom-in;
+}
+
+.popup {
+  z-index: 100;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.popup .popup-background {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+  width: 100%;
+  background-color: #00000099;
+  cursor: zoom-out;
+}
+
+.popup.inactive {
+  display: none;
+}
+
+.popup img {
+  max-width: 90%;
+  max-height: 90%;
+}

docs/layouts/partials/custom/footer.html

@@ -0,0 +1,11 @@
+<div class="popup" id="popup-images">
+  <div class="popup-background">
+    <img src="">
+  </div>
+</div>
+<script type="module">
+  import { Popups, ResponsiveImages } from "{{ .Page.Site.BaseURL }}/js/custom.js";
+  let popups = new Popups();
+  let responsive_images = new ResponsiveImages(popups);
+  window.custom = { popups, responsive_images };
+</script>

docs/layouts/shortcodes/responsive_image.html

@@ -4,7 +4,7 @@
 {{- $images := .Site.Data.images -}}
 {{- $image := index $images $key -}}
 
-<div class="hx-rounded hx-border hx-mb-4 hx-shadow" style="{{ $style | safeCSS }}">
+<div class="responsive-image hx-rounded hx-border hx-mb-4 hx-shadow" style="{{ $style | safeCSS }}">
   <img loading="lazy" decoding="async" src="{{ .Page.Site.BaseURL }}{{ $image.path }}" style="margin-top: 0rem; margin-bottom: 0rem"/>
   <div class="hx-text-center hx-my-2">
     <i>{{ $image.description }}</i>

docs/static/js/custom.js

@@ -0,0 +1,62 @@
+class Popups {
+  constructor() {
+    this.elems = {};
+
+    let popup_elems = document.getElementsByClassName("popup");
+    for (let popup_elem of popup_elems) {
+      let id = popup_elem.getAttribute("id");
+      if (id !== null) {
+        this.elems[id] = popup_elem;
+      } else {
+        continue;
+      }
+
+      popup_elem.classList.add("inactive");
+      let popup_background = popup_elem.querySelector(".popup-background");
+      popup_background.addEventListener("click", (ev) => {
+        ev.preventDefault();
+        this.close_popups();
+      });
+    }
+  }
+
+  close_popups() {
+    for (let id in this.elems) {
+      let elem = this.elems[id];
+      elem.classList.add("inactive");
+    }
+  }
+
+  show_popup(id) {
+    let elem = this.elems[id];
+    elem.classList.remove("inactive");
+  }
+
+  get_popup(id) {
+    let elem = this.elems[id];
+    let background = elem.querySelector(".popup-background");
+    return background;
+  }
+}
+
+class ResponsiveImages {
+  constructor(popups) {
+    let id = "popup-images";
+    let popup_elem = popups.get_popup(id);
+    let popup_image = popup_elem.querySelector("img");
+
+    let images = document.getElementsByClassName("responsive-image");
+    for (let image of images) {
+      let elem = image.querySelector("img");
+      elem.addEventListener("click", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        popup_image.src = elem.src;
+        popups.show_popup(id);
+      });
+    }
+    this.images = images;
+  }
+}
+
+export { Popups, ResponsiveImages };