lightestbox
v0.4.1
Published
Dependency-free lightboxes
Downloads
11
Readme
Lightestbox
Create simple lightboxes to pop up images. Lightestbox is library-agnostic, has no dependencies and weighs in at only 3 KB of Javascript and 1 KB of CSS.
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="lightestbox.min.css">
<link rel="stylesheet" href="lightestbox.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 Lightestbox and the DOM are loaded, we can run:
var elements = document.getElementsByClassName('lightbox');
var L = new lightestbox(elements);
var more_elements = document.getElementsByClassName('other-elements')
L.add(more_elements);
Note that we're not limited to <a>
tags. Setting a data-img
attribute will let Lightestbox 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 lightestbox.*.min.js
file and you can do this:
<link rel="stylesheet" href="lightestbox.jquery.min.js">
<script>
$(document).ready(function(){
$('.boxy').lightestbox();
});
</script>
Note that you don't have to include lightestbox.min.js
if you're using the jQuery or Zepto modules. You will need the CSS, though.
See the examples
directory for examples using vanilla JS, jQuery and Zepto.
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 .lightestbox-wrapper figcaption
.
Don't want your title
attribute used that way? Read on!
Options
Lightestbox is a purposefully minimal tool, but there are a few options:
- prefix: By default, the elements created have CSS classes with the prefix 'ltbx'. Useful if you want multiple styles of lightboxes on a single page?
- maxWidth: The maximum width of the images.
- useTitle: When false, Lightestbox ignores the title element and looks for a
data-caption
attribute instead.
Pass arguments just like you would imagine:
$('#foo').lightestbox({
maxWidth: 600, // in pixels
useTitle: false,
prefix: 'special'
});
If you're using Lightestbox without a library, pass the options as the second argument when you create the Lightestbox object:
var L = new lightestbox(false, {useTitle: false});
L.add(elem);
Display style
Lightestbox 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="ltbx-wrapper" style="width: <dynamic>; height: <dynamic>;">
<!-- lightestbox-wrapper dynamically expands fit the window -->
<div class="ltbx-loading" style="display: block;">
<!-- by default, lightestbox-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>