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.

< 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>

Click anything below

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


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.

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 });

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).