node package manager


The very tiny lightbox

microbox - the very tiny lightbox

  • Tiny
  • Fast
  • API compatible with lightbox.js
  • Caption, album support
  • Keyboard bindings
  • JavaScript API
  • Compatible with AMD, CommonJS, and browser globals
  • umodel (
  • u (

Include the script and dependencies somewhere on your page (preferably right before </body>):

<script src="u.js"></script>
<script src="umodel.js"></script>
<script src="microbox.min.js"></script>

Include the stylesheet somewhere in the <head> of your page (preferably right before </head>):

<link rel="stylesheet" href="microbox.css" />

Add a rel="lightbox" attribute to any images you want to lightbox:

<a href="images/fullSizedImage.png" rel="lightbox">
    <img src="images/thumbSizedImage.png" />

Image sets

<a href="images/fullSizedImage1.png" rel="lightbox[Arbitrary Set ID]">
    <img src="images/thumbSizedImage1.png" />
<a href="images/fullSizedImage2.png" rel="lightbox[Arbitrary Set ID]">
    <img src="images/thumbSizedImage2.png" />
<a href="images/fullSizedImage3.png" rel="lightbox[Arbitrary Set ID]">
    <img src="images/thumbSizedImage3.png" />


<a href="images/fullSizedImage.png" rel="lightbox" title="An optional caption goes here and can contain anything, even <strong>HTML</strong>">
    <img src="images/thumbSizedImage.png" />


Useful for when you add elements you'd like to lightbox after microbox is already initialized.


Note: This will skip over any elements that are already initialized. If you changed a trigger's href or rel attribute dynamically after microbox is already initialized, you'll need to generate a brand new element so microbox doesn't skip over it.

key what do
[esc] close lightbox
[←] or [a] previous slide
[→] or [d] next slide
command arguments what do
init() - scan the DOM and initialize any uninitialized triggers
show() {String or Number} id show lightbox with the given set ID
hide() - hide lightbox
prev() - previous slide
next() - next slide
  • Chrome
  • Firefox 24
  • Safari 7
  • Opera 17
  • Internet Explorer 9+
  • iPad (iOS7)
  • iPhone (iOS7)
  • Unit & layout tests
  • Improve performance on old iOS/Droid
  • Add swipe support when device supports touch