litebox v0.2.1
Litebox
Create simple lightboxes to pop up images. Litebox is library-agnostic, has no dependencies and weighs in at only 3 kb.
Use it with jQuery, Zepto or Ender; or compile it in with Browserify and your favorite tools.
Boxing
First off, you'll need to include the CSS and JS:
<link rel="stylesheet" href="litebox.min.css">
<link rel="stylesheet" href="litebox.min.js">
Let's say we have this html:
<a id="foo" class="boxy" href="img1.png">Link 1</a>
<a id="bar" class="boxy" href="img2.png">Link 2</a>
<span id="baz" class="boxy" data-img="img3.png">Link 3</span>
Once Litebox and the DOM are loaded, we can run:
var L = new litebox(document.getElementById('foo'));
L.add(document.getElementById('bar'));
L.add(document.getElementById('baz')); // a loop would work, too
Note that we're not limited to <a>
tags. Setting a data-img
attribute will let Litebox work nicely with most elements.
Libraries
But wait, you probably don't want to deal with all that getElementById junk. If you're running Zepto or jQuery, just include the appropriate litebox.*.min.js
file and you can do this:
<link rel="stylesheet" href="litebox.jquery.min.js">
<script>
$(document).ready(function(){
$('.boxy').litebox();
});
</script>
Note that you don't have to include litebox.min.js
if you're using the jQuery or Zepto modules. You will need the CSS, though.
Run ender add litebox
and you can do the same thing (assuming you have a selection engine running).
Captions
Want your image to have a caption? Add a title
attribute to your link, and that text will be your caption. Don't like the way the caption looks? Write some CSS - the selector is .litebox-wrapper figcaption
.
Don't want your title
attribute used that way? Read on!
Options
Litebox is a purposefully minimal tool, but there are a few options:
- prefix: By default, the elements created have CSS classes with the prefix 'litebox'. Useful if you want multiple styles of lightboxes on a single page?
- maxWidth: The maximum width of the images.
- useTitle: When false, Litebox ignores the title element and looks for a
data-caption
attribute instead.
Pass arguments just like you would imagine:
$('#foo').litebox({
maxWidth: 600, // in pixels
useTitle: false,
prefix: 'special'
});
If you're using Litebox without a library, pass the options as the second argument when you create the Litebox object:
var L = new litebox(false, {useTitle: false});
L.add(elem);
Display style
Litebox comes with a bare-bones style for the pop-ups, with the expectation is that developers will customize it. For reference, here are the elements it adds to the DOM:
<div class="litebox-wrapper" style="width: <dynamic>; height: <dynamic>;">
<!-- litebox-wrapper dynamically expands fit the window -->
<div class="litebox-loading" style="display: block;">
<!-- by default, litebox-loading has a simple css animation. Grab another one or add a animated gif background-image -->
<div>Loading...</div>
</div>
<figure style="display: block; width: <dynamic>; height: <dynamic>;">
<img src="img.png">
<figcaption>Caption</figcaption>
</figure>
</div>