Responsive Modal Plugin jQuery lity - Free Download Responsive Any Content Modal Plugin For jQuery - lity

Free Download Responsive Any Content Modal Plugin For jQuery – lity

Posted on

This time I will share jQuery Plugin and tutorial about Responsive Any Content Modal Plugin For jQuery – lity, hope it will help you in programming stack.

Responsive Modal Plugin jQuery lity - Free Download Responsive Any Content Modal Plugin For jQuery - lity
File Size: 3.19 MB
Views Total: 6947
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 <link href="/path/to/lity.css" rel="stylesheet">
2 <script src="/path/to/jquery.js"></script>
3 <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.

1 <a href="1.jpg" data-lity data-lity-desc="Image Desc">Image</a>
2 <a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>Youtube Video</a>
3 <a href="//vimeo.com/1084537" data-lity>Vimeo Video</a>
4 <a href="//<a href="https://www.jqueryscript.net/tags.php?/map/">map</a>s.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.

1 <a href="#my<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a>" data-lity>Launch</a>
2  
3 <div id="myModal" class="lity-hide">
4   Modal content here
5 </div>

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

1 // lity(target, option, HTMLElement|$ opener)
2  
3 // Open a URL or HTML in a lightbox
4 var lightbox = lity('//www.youtube.com/watch?v=XSGBVzeBUbk');
5 var lightbox = lity('<p>Modal Content Here</p>');
6  
7 // Bind as an event handler
8 $(document).on('click', '[data-lightbox]', lity);

5. Possible plugin options.

01 {
02   esc: true, // close by ESC key
03   handler: null,
04   handlers: {
05     image: imageHandler,
06     inline: inlineHandler,
07     youtube: youtubeHandler,
08     vimeo: vimeoHandler,
09     googlemaps: googlemapsHandler,
10     facebookvideo: facebookvideoHandler,
11     iframe: iframeHandler
12   },
13   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
14 }

6. API methods.

01 var lightbox = lity('//www.youtube.com/watch?v=XSGBVzeBUbk');
02  
03 // closes the modal
04 lightbox.close();
05  
06 // returns the root HTML element
07 lightbox.element();
08  
09 // returns the trigger element
10 lightbox.opener();
11  
12 // returns the content element
13 lightbox.content();
14  
15 // sets or returns options
16 lightbox.options();

7. Events.

01 $(document).on('lity:open', function(event, instance) {
02    // on open
03 });
04  
05 $(document).on('lity:close', function(event, instance) {
06    // on close
07 });
08  
09 $(document).on('lity:ready', function(event, instance) {
10    // on ready
11 });
12  
13 $(document).on('lity:remove', function(event, instance) {
14    // on remove
15 });
16  
17 $(document).on('lity:resize', function(event, instance) {
18    // on resize
19 });

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.