microbox - the very tiny lightbox
Demo
http://eighttrackmind.github.io/microbox/demo
Features
- Tiny
- Fast
- API compatible with lightbox.js
- Caption, album support
- Keyboard bindings
- JavaScript API
- Compatible with AMD, CommonJS, and browser globals
Dependencies
- umodel (https://github.com/eighttrackmind/umodel)
- u (https://github.com/eighttrackmind/u)
Usage (non-AMD)
Include the script and dependencies somewhere on your page (preferably right before </body>
):
...
Include the stylesheet somewhere in the <head>
of your page (preferably right before </head>
):
......
Add a rel="lightbox"
attribute to any images you want to lightbox:
Features
Image sets
Captions
Re-initialization
Useful for when you add elements you'd like to lightbox after microbox is already initialized.
microbox
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 bindings
key | what do |
---|---|
[esc] | close lightbox |
[←] or [a] | previous slide |
[→] or [d] | next slide |
API
microbox
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 |
Tested on
- Chrome
- Firefox 24
- Safari 7
- Opera 17
- Internet Explorer 9+
- iPad (iOS7)
- iPhone (iOS7)
Todo
- Unit & layout tests
- Improve performance on old iOS/Droid
- Add swipe support when device supports touch