From 8d44725090a742ce0b1127982b1dacc6ff5b0559 Mon Sep 17 00:00:00 2001
From: interlope <spleenftw@gmail.com>
Date: Sat, 30 May 2026 02:42:42 +0200
Subject: [PATCH] Add lightbox functionality for article images with zoom
 effect

---
 css/style.css | 43 +++++++++++++++++++++++++++++++++++++++++++
 index.php     | 42 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+)

diff --git a/css/style.css b/css/style.css
index af91cb6..f996571 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1184,6 +1184,49 @@ footer.footer-modern a:hover {
 	margin-right: 0.4rem;
 }
 
+/* ========================================
+   LIGHTBOX
+   ======================================== */
+.lightbox-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 2000;
+	background: rgba(0, 0, 0, 0.88);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: zoom-out;
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
+}
+
+.lightbox-overlay.is-open {
+	opacity: 1;
+	visibility: visible;
+	transition: opacity 0.2s ease, visibility 0s linear 0s;
+}
+
+.lightbox-overlay img {
+	max-width: 90vw;
+	max-height: 90vh;
+	object-fit: contain;
+	border-radius: var(--radius-sm);
+	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+	transform: scale(0.94);
+	transition: transform 0.2s ease;
+	cursor: zoom-out;
+}
+
+.lightbox-overlay.is-open img {
+	transform: scale(1);
+}
+
+/* Hint that content images are clickable */
+.content img {
+	cursor: zoom-in;
+}
+
 /* ========================================
    TABLE OF CONTENTS (left sidebar, article view)
    ======================================== */
diff --git a/index.php b/index.php
index 3c84024..30068cc 100644
--- a/index.php
+++ b/index.php
@@ -340,6 +340,48 @@
 		})();
 	</script>
 
+	<!-- Lightbox: click any article image to zoom -->
+	<script>
+		(function () {
+			var content = document.querySelector('.content');
+			if (!content) return;
+
+			var images = content.querySelectorAll('img');
+			if (!images.length) return;
+
+			// Build overlay once, reuse for every image
+			var overlay = document.createElement('div');
+			overlay.className = 'lightbox-overlay';
+			var zoomed = document.createElement('img');
+			overlay.appendChild(zoomed);
+			document.body.appendChild(overlay);
+
+			function open(src, alt) {
+				zoomed.src = src;
+				zoomed.alt = alt || '';
+				overlay.classList.add('is-open');
+				document.body.style.overflow = 'hidden';
+			}
+
+			function close() {
+				overlay.classList.remove('is-open');
+				document.body.style.overflow = '';
+			}
+
+			Array.prototype.forEach.call(images, function (el) {
+				el.addEventListener('click', function () { open(el.src, el.alt); });
+			});
+
+			overlay.addEventListener('click', close);
+
+			document.addEventListener('keydown', function (e) {
+				if ((e.key === 'Escape' || e.key === 'Esc') && overlay.classList.contains('is-open')) {
+					close();
+				}
+			});
+		})();
+	</script>
+
 	<!-- Load Bludit Plugins: Site Body End -->
 	<?php Theme::plugins('siteBodyEnd'); ?>