How to Add a Free Image Lightbox to Any Static Website

The problem

A small thumbnail that links to its own full-size image page works, but it’s a jarring full page navigation for what should feel instant. A lightbox — an overlay showing the full image without leaving the page — is the expected pattern, and it’s a small enough feature that pulling in a whole gallery library for it is overkill for most sites.

Expected outcome

By the end of this guide you will have a working lightbox: click any marked image, see it full-size in an overlay, click anywhere (or press Escape) to close.

Requirements and costs

• Any static site.
• Cost: free. No dependencies.

Step-by-step implementation

1. Download the starter from the link below.
2. Add lightbox.js to your site with <script src="lightbox.js"></script> near the end of the page.
3. Mark any image you want clickable with a data-lightbox attribute pointing at the full-size version:

   <img src="thumb.jpg" data-lightbox="full-size.jpg" alt="...">

4. That’s it — the script finds every marked image automatically and wires up the click.

A real example

Click a 150px thumbnail and an overlay appears showing the full 800px image; click the dark overlay anywhere, or press Escape, and it closes — no page navigation, no flash of a blank page while a new one loads.

Verification and troubleshooting

What we tested, on 5 October 2026 (record TNT-TEST-2026-10-05-017): loaded the demo in a real browser, clicked the marked thumbnail, and confirmed the overlay became visible showing the correct full-size image (not the thumbnail). Then pressed Escape and confirmed the overlay correctly hid itself again — both real browser interactions, not just reading the code.

Troubleshooting:

• Clicking the image does nothing. Check the script tag loads AFTER the images exist in the HTML (at the end of <body>), since the script only wires up images present when it runs.
• The lightbox shows the thumbnail, not the full-size image. Check the data-lightbox attribute’s path is correct and points to the full-size file, not a copy of the thumbnail.
• You want it to also work with arrow keys to move between images in a gallery. This starter opens one image at a time with no gallery navigation; that’s a genuinely bigger feature worth a real gallery library if you need it, not a small addition to this script.

Limitations and alternatives

This is a single-image lightbox, not a gallery with next/previous navigation between multiple images — for that, a dedicated gallery library is a better fit than extending this one. It also doesn’t lazy-load the full-size image until clicked, which is usually what you want (no point loading large images nobody opens) but worth knowing if you’re auditing total page weight.

Free resources

The download contains the script and a working demo.

Download the lightbox starter (ZIP, 1 KB)

Is there a paid version?

Not yet. This is the complete method. TNT Review has sold nothing to date and has no checkout, so any price we discuss in future should be read as a hypothesis, not an offer.