Lity is a ultra-lightweight and responsive lightbox plugin which supports images, iframes and inline content out of the box.
Minified and gzipped, its total footprint weights about 2kB.
It works with jQuery and Zepto.
All ready-to-use files are located in the dist/ directory.
Include the Lity javascript and css files and its dependencies in your HTML document:
<link href="dist/lity.css" rel="stylesheet">
<script src="vendor/jquery.js"></script>
<script src="dist/lity.js"></script>Lity can also be installed via Bower or npm.
Add the data-lity attribute to <a> elements for which you want the links to
be opened in a lightbox:
<a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity>Image</a>
<a href="#inline" data-lity>Inline</a>
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>
<a href="//vimeo.com/1084537" data-lity>iFrame Vimeo</a>
<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>
<div id="inline" style="background:#fff" class="lity-hide">
Inline content
</div>If you want to open another URI than defined in the href attribute, just add
a data-lity-target with the URI:
<a href="/image.html" data-lity data-lity-target="/image-preview.jpg">Image</a>First create a lity instance:
var lightbox = lity();lightbox is now a function which can be either used directly to open links in
a lightbox or as an event handler:
// Open a URL in a lightbox
lightbox('//www.youtube.com/watch?v=XSGBVzeBUbk');
// Bind as an event handler
$(document).on('click', '[data-lightbox]', lightbox);If you want to close the currently opened lightbox, use lightbox.close().
Triggered before the lightbox is opened.
$(document).on('lity:open', function(event, lightbox, trigger) {
});Note: The trigger argument might be undefined if the lightbox has been
opened progammatically and not by a click event handler.
Triggered when the lightbox is ready.
$(document).on('lity:ready', function(event, lightbox, trigger) {
});Note: The trigger argument might be undefined if the lightbox has been
opened progammatically and not by a click event handler.
Triggered before the lightbox is closed.
$(document).on('lity:close', function(event, lightbox) {
});Triggered when the closing animation is finished and the lightbox is removed from the DOM.
$(document).on('lity:remove', function(event, lightbox) {
});Triggered when the lightbox is resized, usually when the user resizes the window.
$(document).on('lity:resize', function(event, lightbox) {
});Copyright (c) 2015-2016 Jan Sorgalla. Released under the MIT license.