zoomable images

diff --git a/content/one-shot-painting-2025-11-08.md b/content/one-shot-painting-2025-11-08.md
index 6374f0d0ca79a96e85b7464cd036953ee9cd6380..5475fdb6f4e7a3d778f5c00b7cbf8e6a44e1e972 100644 (file)
--- a/content/one-shot-painting-2025-11-08.md
+++ b/content/one-shot-painting-2025-11-08.md
@@ -12,14 +12,14 @@ on there's nothing I want to paint more than _literally anything else_.
 So, since I've begun my Mordheim war band, I've dug out cast models from the
 vaults to assemble and base. I've reread all the rules for Cauldron - a
 beautiful, whimsical game by 
-[HILL GIANT](https://mordheimer.net/docs/warbands/grade-1a-warbands/skaven-eshin#0--1-eshin-sorcerer){. .anchor} -
+[HILL GIANT](https://hillgiant.itch.io){. .anchor} -
 and pulled together two new gangs for Ramshackle's 
 [Mini Gangs](https://shop.ramshacklegames.co.uk/home/680-preorder-mini-gangs-v2-book-and-pdf.html){. .anchor}.
 
 I don't know what it is about me, but I'm flawed in this way, and I'm sure I'm
 not alone. Big projects are fun but they can also be daunting.
 
-![Smollockton Scarecrows by Ramshackle Games]({static}/images/313A568A-4185-4B91-8AD2-7E2B4A8EF3DC.jpg){. .image-med}
+![Smollockton Scarecrows by Ramshackle Games]({static}/images/313A568A-4185-4B91-8AD2-7E2B4A8EF3DC.jpg){. .image-med data-caption=true}
 
 ## Palate Cleansers FTW
 
@@ -37,7 +37,7 @@ print new models, or I get new hand cast models in the mail, I will usually
 clean them up, base and prime them right away. This way I always have plenty of
 models on hand, ready to paint.
 
-![Deep one, by me, in front of a procrastinated project!]({static}/images/IMG_0027.jpg){. .image-med}
+![Deep one, by me, in front of a procrastinated project!]({static}/images/IMG_0027.jpg){. .image-med data-caption=true}
 
 I don't want to skip a hobby session because I'm feeling overwhelmed by my
 current project. I'd rather grab a prepped model off the shelf. While I'll

diff --git a/themes/vexingworkshop/static/css/main.css b/themes/vexingworkshop/static/css/main.css
index f01af3b653f64c0c6615b0a859162919466524b3..ef2556df015ba583cc9348bf6aabe06e90e5f1ff 100644 (file)
--- a/themes/vexingworkshop/static/css/main.css
+++ b/themes/vexingworkshop/static/css/main.css
@@ -186,3 +186,27 @@ blockquote p {
 img.profile {
   width: 400px;
 }
+
+body div.overlay {
+  position: fixed;
+  background: #000000aa;
+  backdrop-filter: blur(10px);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+div.overlay figure {
+  position: fixed;
+  left: 15%;
+  right: 15%;
+  top: 15%;
+}
+
+div.overlay figure img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

diff --git a/themes/vexingworkshop/static/js/site.js b/themes/vexingworkshop/static/js/site.js
index 354e866c9bfd65f907f7bc3b07373b8a720845c2..9b62e4f2fb23212a1e00e03c63119fe1c5a73c7d 100644 (file)
--- a/themes/vexingworkshop/static/js/site.js
+++ b/themes/vexingworkshop/static/js/site.js
@@ -1,19 +1,22 @@
 function main() {
-  var imageNodes = document.querySelectorAll("img.image-med");
-  var images = [];
+  var imageNodes = document.querySelectorAll("img");
 
-  imageNodes.forEach((image) => {
-    images.push(new InteractiveImage(image));
-  });
+  imageNodes.forEach((image) => new InteractiveImage(image));
 }
 
 class InteractiveImage {
+
+  static images = [];
   
   constructor(imageElement) {
     this.image = imageElement;
 
-    this.addCaption();
+    if(this.image.dataset.caption == 'true' ) {
+      this.addCaption();
+    }
     this.addEvents();
+
+    InteractiveImage.images.push(this.image);
   }
 
   addCaption() {
@@ -32,8 +35,40 @@ class InteractiveImage {
 
   addEvents() {
     this.image.addEventListener("click", (event) => {
-      console.log(event.target);
+      var display = new ImageDisplay(event.target);
+    });
+  }
+}
+
+class ImageDisplay {
+
+  #overlayElem;
+  #figureElem;
+
+  constructor(imageElement) {
+    this.image = imageElement.cloneNode(true);
+
+    var overlay = this.overlay;
+    console.log(this);
+  }
+
+  get overlay() {
+    if (!this.#overlayElem) {
+      this.#overlayElem = document.createElement("div");
+    }
+
+    this.#overlayElem.setAttribute("class", "overlay");
+    this.#overlayElem.addEventListener("click", (event) => {
+      this.#overlayElem.remove();
     });
+
+    this.#figureElem = document.createElement("figure");
+    this.#figureElem.appendChild(this.image);
+    this.#overlayElem.appendChild(this.#figureElem);
+
+    document.body.appendChild(this.#overlayElem);
+
+    return this.#overlayElem;
   }
 }