Simplest Image & Video Lightbox Plugin - JS Lightbox

A really small and simple jQuery based lightbox library used to overlay any image or HTML5 video on top of the current page.

The users are able to close the lightbox by clicking outside of the image or video.

How to use it:

1. Load the lightbox.min.css for the basic styling of the lightbox.

<link href="css/lightbox.min.css" rel="stylesheet">

2. Load jQuery library and the lightbox.min.js right before the closing body tag.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="js/lightbox.js"></script>

3. Apply the lightbox to a given image within the document.

<img src="https://source.unsplash.com/random/600x450" class="lightbox-img">

4. Apply the lightbox to a given HTML5 video within the document. The plugin also adds the autoplay webkit-playsinline loop attributes to your video tag.

<video width="400" controls class="lightbox-vid">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

5. Override the default styles of the lightbox background/content.

/* Lightbox Background */
#lightbox-display {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  /*padding-top: 4em; *//* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Lightbox Content */
#lightbox-content {
  position: absolute;
  margin: auto;
  display: block;
  max-height: 95vh;
  max-width: 95vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1px;
}

---

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