Image/Gallery/Youtube/HTML Modal Plugin - jQuery KBmodal

Image/Gallery/Youtube/HTML Modal Plugin - jQuery KBmodal
File Size: 46.6 KB
Views Total:
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="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></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>

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