Responsive Any Content Modal Plugin For jQuery - lity

lity is a lightweight, responsive, accessible, fullscreen modal window plugin for jQuery (or zepto) that works with any web content such as images, text, iframes, Youtube videos and more. Works in modern browsers.

How to use it:

1. First, the jQuery library needs to be included. Then, download the plugin and link to the lity plugin's JavaScript & Stylesheet files.

<link href="/path/to/lity.css" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/lity.js"></script>

2. Add the 'data-lity' attribute to the modal trigger element and specify the content to be displayed in the modal window.

<a href="1.jpg" data-lity data-lity-desc="Image Desc">Image</a>
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>Youtube Video</a>
<a href="//vimeo.com/1084537" data-lity>Vimeo Video</a>
<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>

3. If you want to load the inline content to the modal window.

<a href="#myModal" data-lity>Launch</a>

<div id="myModal" class="lity-hide">
  Modal content here
</div>

4. You're also allowed to create the modal windows programmatically.

// lity(target, option, HTMLElement|$ opener)

// Open a URL or HTML in a lightbox
var lightbox = lity('//www.youtube.com/watch?v=XSGBVzeBUbk');
var lightbox = lity('<p>Modal Content Here</p>');

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

5. Possible plugin options.

{
  esc: true, // close by ESC key
  handler: null,
  handlers: {
    image: imageHandler,
    inline: inlineHandler,
    youtube: youtubeHandler,
    vimeo: vimeoHandler,
    googlemaps: googlemapsHandler,
    facebookvideo: facebookvideoHandler,
    iframe: iframeHandler
  },
  template: '<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1"><div class="lity-wrap" data-lity-close role="document"><div class="lity-loader" aria-hidden="true">Loading...</div><div class="lity-container"><div class="lity-content"></div><button class="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>&times;</button></div></div></div>' // custom template
}

6. API methods.

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

// closes the modal
lightbox.close();

// returns the root HTML element
lightbox.element();

// returns the trigger element
lightbox.opener();

// returns the content element
lightbox.content();

// sets or returns options
lightbox.options();

7. Events.

$(document).on('lity:open', function(event, instance) {
   // on open
});

$(document).on('lity:close', function(event, instance) {
   // on close
});

$(document).on('lity:ready', function(event, instance) {
   // on ready
});

$(document).on('lity:remove', function(event, instance) {
   // on remove
});

$(document).on('lity:resize', function(event, instance) {
   // on resize
});

Changelog:

v2.4.1 (2020-04-26)

• Compatibility with jQuery 3.5.0

v2.4.0 (2019-11-22)

• Allow 'autoplay' on YouTube

---

This awesome jQuery plugin is developed by jsor. For more Advanced Usages, please check the demo page or visit the official website.