engineering/lumbda
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

whitepaper HTML: click-to-zoom lightbox for diagrams

Browse source 
Any <img> inside <main>/<section> now opens in a full-viewport
overlay (92% black bg, image centered at max-width/max-height). Click
the overlay or press Esc to close. Pure vanilla JS + CSS, injected
inline via inject-whitepaper-css.py — keeps the HTML self-contained
with no external lightbox dependency. cursor: zoom-in signals
interactivity; the overlay uses cursor: zoom-out.
This commit is contained in:
russell@unturf.com 2026-04-19 17:59:38 -04:00
parent 83daa3d691
commit 3cb008dd9f
2 changed files with 98 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

49
whitepaper/inject-whitepaper-css.py
View file

@ -49,7 +49,56 @@ body > .uncloseai-floating-button {{
max-width: none !important;
background-color: transparent !important;
}}
/* Click-to-zoom lightbox for diagrams. */
main img, section img {{
cursor: zoom-in;
}}
.wp-lightbox {{
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
display: none;
align-items: center;
justify-content: center;
z-index: 10001;
cursor: zoom-out;
padding: 1.5rem;
}}
.wp-lightbox.open {{ display: flex; }}
.wp-lightbox img {{
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}}
</style>
<script>
(function () {{
if (window.__wpLightbox) return;
window.__wpLightbox = true;
document.addEventListener("DOMContentLoaded", function () {{
var imgs = document.querySelectorAll("main img, section img");
if (!imgs.length) return;
var overlay = document.createElement("div");
overlay.className = "wp-lightbox";
var big = document.createElement("img");
big.alt = "";
overlay.appendChild(big);
document.body.appendChild(overlay);
function close() {{ overlay.classList.remove("open"); big.src = ""; }}
overlay.addEventListener("click", close);
document.addEventListener("keydown", function (e) {{
if (e.key === "Escape") close();
}});
imgs.forEach(function (img) {{
img.addEventListener("click", function () {{
big.src = img.currentSrc || img.src;
overlay.classList.add("open");
}});
}});
}});
}})();
</script>
"""

49
whitepaper/lumbda-whitepaper.html
View file

@ -836,7 +836,56 @@ body > .uncloseai-floating-button {
max-width: none !important;
background-color: transparent !important;
}
/* Click-to-zoom lightbox for diagrams. */
main img, section img {
cursor: zoom-in;
}
.wp-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
display: none;
align-items: center;
justify-content: center;
z-index: 10001;
cursor: zoom-out;
padding: 1.5rem;
}
.wp-lightbox.open { display: flex; }
.wp-lightbox img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}
</style>
<script>
(function () {
if (window.__wpLightbox) return;
window.__wpLightbox = true;
document.addEventListener("DOMContentLoaded", function () {
var imgs = document.querySelectorAll("main img, section img");
if (!imgs.length) return;
var overlay = document.createElement("div");
overlay.className = "wp-lightbox";
var big = document.createElement("img");
big.alt = "";
overlay.appendChild(big);
document.body.appendChild(overlay);
function close() { overlay.classList.remove("open"); big.src = ""; }
overlay.addEventListener("click", close);
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") close();
});
imgs.forEach(function (img) {
img.addEventListener("click", function () {
big.src = img.currentSrc || img.src;
overlay.classList.add("open");
});
});
});
})();
</script>
</head>
<body>
<main id="lumbda">