From: signal9 <adam@vexingworkshop.com>
Date: Tue, 11 Nov 2025 18:42:34 +0000 (-0700)
Subject: zoomable images
X-Git-Url: https://git.vexinglabs.com/?a=commitdiff_plain;h=7820c0e9b3373d96205549989b84ec44b8f20851;p=vexingworkshop.git

zoomable images
---

diff --git a/content/one-shot-painting-2025-11-08.md b/content/one-shot-painting-2025-11-08.md
index 6374f0d..5475fdb 100644
--- 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 f01af3b..ef2556d 100644
--- 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 354e866..9b62e4f 100644
--- 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;
   }
 }