microbox
v3.0.8
Published
The very tiny lightbox
Downloads
18
Maintainers
bchernyReadme
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>):
...
<script src="u.js"></script>
<script src="umodel.js"></script>
<script src="microbox.min.js"></script>
</body>
</html>Include the stylesheet somewhere in the <head> of your page (preferably right before </head>):
...
<link rel="stylesheet" href="microbox.css" />
</head>
...Add a rel="lightbox" attribute to any images you want to lightbox:
<a href="images/fullSizedImage.png" rel="lightbox">
<img src="images/thumbSizedImage.png" />
</a>Features
Image sets
<a href="images/fullSizedImage1.png" rel="lightbox[Arbitrary Set ID]">
<img src="images/thumbSizedImage1.png" />
</a>
<a href="images/fullSizedImage2.png" rel="lightbox[Arbitrary Set ID]">
<img src="images/thumbSizedImage2.png" />
</a>
<a href="images/fullSizedImage3.png" rel="lightbox[Arbitrary Set ID]">
<img src="images/thumbSizedImage3.png" />
</a>Captions
<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" />
</a>Re-initialization
Useful for when you add elements you'd like to lightbox after microbox is already initialized.
microbox.init()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