# Lightweight Image Lightbox

> Opens linked images in post content in a full-screen overlay instead of a new page, with keyboard and click-to-close support and no external library.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: images, lightbox, javascript, gallery
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-image-lightbox/

## Code

```html
<div id="wpide-lightbox" hidden role="dialog" aria-modal="true" aria-label="Image viewer" style="position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.88);cursor:zoom-out;">
    <img alt="" style="max-width:100%;max-height:100%;box-shadow:0 8px 40px rgba(0,0,0,.5);">
</div>
<script>
(function () {
    var box = document.getElementById('wpide-lightbox');
    if (!box) { return; }
    var img = box.querySelector('img'), last = null;
    function close() { box.hidden = true; img.removeAttribute('src'); if (last) { last.focus(); } }
    document.addEventListener('click', function (e) {
        var link = e.target.closest ? e.target.closest('a[href]') : null;
        if (!link || !link.querySelector('img') || !/\.(jpe?g|png|gif|webp|avif)(\?.*)?$/i.test(link.getAttribute('href'))) { return; }
        e.preventDefault();
        last = link;
        img.src = link.href;
        img.alt = (link.querySelector('img').alt || '');
        box.hidden = false;
        box.focus();
    });
    box.setAttribute('tabindex', '-1');
    box.addEventListener('click', close);
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !box.hidden) { close(); } });
})();
</script>
```

## Notes

Works on images that link to their media file (set "Link to: Media File" in the image block). Press Escape or click anywhere to close.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Lightweight Image Lightbox" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/