Image Inline Google Maps YouTube Vimeo URL
dist/
directory.<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.
<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.
// 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);
lightbox.close()
.