Package Exports

lity

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (lity) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lity

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.

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>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>

Programmatic

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().

lity