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.
All ready-to-use files are located in the
<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.
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>
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
Copyright (c) 2015- Jan Sorgalla. Released under the MIT license.