JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<link href="https://github.com/jsor/lity/blob/master/dist/lity.css" rel="stylesheet">
<script src="https://github.com/jsor/lity/blob/master/vendor/jquery.js"></script>
<script src="https://github.com/jsor/lity/blob/master/dist/lity.js"></script>

<a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity>Image</a>
<a href="#inline" data-lity>Inline</a>
<a href="https://www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>
<a href="https://vimeo.com/1084537" data-lity>iFrame Vimeo</a>
<a href="https://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>

JavaScript

lity('https://www.youtube.com/watch?v=XSGBVzeBUbk');
lity('<p>Some content to show...</p>');

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