Image/Gallery/Youtube/HTML Modal Plugin - jQuery KBmodal
File Size: | 50.7 KB |
---|---|
Views Total: | 3668 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
KBmodal is a fully responsive modal plugin for jQuery that displays images, galleries, Youtube videos, and even HTML contents in a popup overlay.
How to use it:
1. Load the necessary jQuery library and Font Awesome Iconic Font in the HTML document.
<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" /> <script src="/path/to/cdn/jquery.min.js"></script>
2. Load the KBmodal plugin's JavaScript and CSS files.
<script src="js/KBmodal.js"></script> <link href="css/KBmodal.css" rel="stylesheet">
3. Attach the modal to a single image.
- class="KBmodal": required CSS class
- data-content-url: the path to the full image
<div class="KBmodal" data-content-url="full.jpg"> <img src="thumb.jpg"> </div>
4. Create a gallery lightbox from a group of images.
- class="KBmodal": required CSS class
- data-content-url: the path to the full image
- data-content-type: content type
- data-content-gallery: all the images must have the gallery name.
<div class="KBmodal" data-content-url="full-1.jpg" data-content-type="gallery" data-content-gallery="myGallery"> <img src="thumb-1.jpg"> </div> <div class="KBmodal" data-content-url="full-1.jpg" data-content-type="gallery" data-content-gallery="myGallery"> <img src="thumb-1.jpg"> </div> <div class="KBmodal" data-content-url="full-1.jpg" data-content-type="gallery" data-content-gallery="myGallery"> <img src="thumb-1.jpg"> </div>
5. Attach the modal to a Youtube video.
- class="KBmodal": required CSS class
- data-content-url: Youtube link
- data-content-type: content type
<div class="KBmodal" data-content-url="https://youtu.be/F7OsulEsvIw" data-content-type="yt"> <img src="youtube-thumb.jpg"> </div>
6. Display HTML content in the modal popup.
- class="KBmodal": required CSS class
- data-content-url: HTML content
- data-content-type: content type
<div class="KBmodal" data-content-url="<div style='width: 400px; height: 400px; background-color: black; color: white; display: flex; justify-content: center; align-items: center'>Your html content</div>" data-content-type="html"> <h3>Open HTML Modal</h3> </div>
Changelog:
2020-10-08
- CSS Updated
This awesome jQuery plugin is developed by mrkariox. For more Advanced Usages, please check the demo page or visit the official website.