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 (https://github.com/eighttrackmind/umodel)
  • u (https://github.com/eighttrackmind/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.

keywhat do
[esc]close lightbox
[←] or [a]previous slide
[→] or [d]next slide
commandargumentswhat do
init()-scan the DOM and initialize any uninitialized triggers
show(){String or Number} idshow 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