v1.0 — Zero dependencies

The lightbox
that gets out
of the way

Images, YouTube, Vimeo, iframes, inline HTML — all in under 7 KB. Drop in two files. No config required.

Get NanoBox See it live →
< 7 KB
gzipped total
0
dependencies
5
content types
UMD
module format
index.html
<!-- 1. Drop in two files -->
<link rel="stylesheet" href="nanobox.css"/>
<script src="nanobox.js"></script>

<!-- 2. Add data-nanobox. Done. -->
<a href="photo.jpg"
   data-nanobox>
  Open photo
</a>

<!-- YouTube auto-detected -->
<a href="youtu.be/ID"
   data-nanobox>Watch</a>

// live demo

Click anything below

Every card triggers NanoBox. Content type is auto-detected from the URL — no config.

Mountain
Image · JPEG
Landscape
 Portrait
Image · Portrait
Tree
 Lake
Image · JPEG
Misty Lake
YouTube
Sticky Anything
Vimeo
Vimeo Video
iFrame
OpenStreetMap
Inline HTML
Contact form
⚡
Auto-detection
Content type is inferred from the URL. Images, YouTube, Vimeo, iframes, and inline HTML — no type attribute needed.
🪶
Under 7 KB gzip
JS and CSS combined weigh less than most PNG thumbnails. Zero dependencies. Zero build step required.
♿
Accessible
Focus trap, role="dialog", aria-modal, ESC to close, focus returned to trigger on close.
🔌
Zero config
Auto-initialises on DOMContentLoaded. Add data-nanobox to any element and it works.
🎨
CSS custom properties
All visual tokens — z-index, radius, shadow, overlay colour, animation duration — exposed as --nb-* vars.
📦
UMD module
Works as a plain <script> tag, CommonJS require(), or AMD — no bundler needed.

// install

Two ways to get it

CDN / direct download
<link rel="stylesheet" href="nanobox.min.css"/>

<script src="nanobox.min.js"></script>
npm
npm install nanobox-lightbox
Usage
<!-- Image -->
<a href="photo.jpg" data-nanobox>...</a>

<!-- YouTube / Vimeo -->
<a href="youtu.be/ID" data-nanobox>...</a>

<!-- Inline HTML -->
<a href="#my-div" data-nanobox>...</a>

// Optional: custom options
NanoBox.init({ animationDuration: 400 });

// api

Options & methods

Option Default Description
animationDuration 280 Fade + scale transition in milliseconds
closeOnOverlayClick true Click the backdrop to close
escToClose true ESC key closes the lightbox
scrollLock true Lock body scroll while open
showSpinner true Loading spinner before content appears
onOpen(lb) null Called when lightbox opens
onClose(lb) null Called after lightbox closes
onReady(lb, el) null Called when content finishes loading
Method Description
NanoBox.init(opts?) Re-init the singleton with custom options. Auto-called on load — optional.
NanoBox.open(src, opts?) Open programmatically. Per-call options override defaults.
NanoBox.close() Close the active lightbox.
NanoBox.destroy() Close and remove all event listeners. For SPA teardown.
NanoBox.create(opts?) Create an independent instance (e.g. multiple galleries).