1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// lightbox.js — click any image inside rendered Markdown to view it full-screen.
(function () {
  "use strict";

  function open(src, alt) {
    var overlay = document.createElement("div");
    overlay.className = "lightbox";
    var img = document.createElement("img");
    img.src = src;
    img.alt = alt || "";
    overlay.appendChild(img);
    document.body.appendChild(overlay);
    document.body.style.overflow = "hidden";

    function close() {
      overlay.remove();
      document.body.style.overflow = "";
      document.removeEventListener("keydown", onKey);
    }
    function onKey(e) {
      if (e.key === "Escape") close();
    }
    overlay.addEventListener("click", close);
    document.addEventListener("keydown", onKey);
  }

  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".markdown img").forEach(function (img) {
      img.classList.add("zoomable");
      img.addEventListener("click", function () { open(img.src, img.alt); });
    });
  });
})();