Image Lightbox for Post Images

Ghost has no built-in way to enlarge images — readers on smaller screens squint at detail shots. This snippet makes every image inside your post content clickable: a click opens the full image centered in a dark overlay (a “lightbox”), and a click anywhere — or the Escape key — closes it. It’s fully self-contained vanilla JavaScript: no external library, nothing to load from a CDN.

The Code

Paste into Settings → Code injection → Site footer:

<script>
(function() {
  var overlay = document.createElement('div');
  overlay.id = 'lightbox-overlay';
  overlay.style.cssText =
    'display:none;position:fixed;inset:0;z-index:99999;' +
    'background:rgba(0,0,0,0.88);cursor:zoom-out;' +
    'align-items:center;justify-content:center;padding:24px;';

  var img = document.createElement('img');
  img.style.cssText =
    'max-width:100%;max-height:100%;border-radius:4px;' +
    'box-shadow:0 8px 40px rgba(0,0,0,0.5);';
  overlay.appendChild(img);
  document.body.appendChild(overlay);

  function close() {
    overlay.style.display = 'none';
    document.body.style.overflow = '';
  }

  overlay.addEventListener('click', close);
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') close();
  });

  var scope = document.querySelector('.gh-content') ||
              document.querySelector('article') || document.body;

  scope.querySelectorAll('img').forEach(function(image) {
    if (image.closest('a')) return; // linked images keep their link
    image.style.cursor = 'zoom-in';
    image.addEventListener('click', function() {
      img.src = image.currentSrc || image.src;
      img.alt = image.alt || '';
      overlay.style.display = 'flex';
      document.body.style.overflow = 'hidden';
    });
  });
})();
</script>

How to Install

1. Ghost Admin → Settings → Code injection
2. Paste into Site footer, save
3. Open a post with images — the cursor becomes a magnifier over images; click to enlarge

How It Works

The script builds one hidden overlay when the page loads. It then finds your post content — Ghost’s standard .gh-content container, with an article fallback for older themes — and makes each image inside it clickable. Clicking copies the image’s source (using currentSrc, so you get the same responsive size the browser chose) into the overlay and shows it; background scrolling is paused while the lightbox is open.

Images that are already wrapped in a link are skipped, so galleries or images linking elsewhere keep their original behavior.

Customization

Darker/lighter backdrop: adjust rgba(0,0,0,0.88). Include images outside posts (e.g. page content): change the scope line to document.body. Zoom animation: add transition:transform .15s on the image and toggle a scale — kept out of the default to stay minimal.

Works With

Every Ghost theme — the snippet targets Ghost’s post-content container, which all current themes use. All Luxe themes are compatible.