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
   
Image/Gallery/Youtube/HTML Modal Plugin - jQuery KBmodal

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


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