Lity

Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box.

Minified and gzipped, its total footprint weights about 3kB.

It requires jQuery or Zepto (with the callbacks, deferred and data modules).

Demos

Image Inline Google Maps YouTube Vimeo URL

Installation

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.

Usage

Declarative

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 data-lity-desc="Photo of a flower">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>

Programmatic

Use the global lity function to open URLs (or HTML) in a lightbox or as an event handler.

// Open a URL in a lightbox
var lightbox = lity('//www.youtube.com/watch?v=XSGBVzeBUbk');

// Bind as an event handler
$(document).on('click', '[data-lightbox]', lity);

If you want to close the opened lightbox, use lightbox.close().