Customizable Multi-media Lightbox Library – Lightbox.js

Preview:

Description:

The Lightbox.js JavaScript library allows media content (images, text, Youtube/Vimeo videos, etc) to be displayed in an elegant modal dialog. Also supports gallery mode which enables you to navigate through the media content in the lightbox.

How to use it:

Import the Lightbox.css and Lightbox.js into the html document.

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

Enable a trigger element to launch an image lightbox.

<a href="1.png" data-lightbox data-image-alt="Image Desc"> 
  Image Lightbox
</a>

Enable a trigger element to launch a Youtube or Vimeo video lightbox.

<a href="https://vimeo.com/VIDEO ID" data-lightbox> 
  Vimeo Lightbox
</a> 
<a href="https://www.youtube.com/watch?v=VIDEO ID" data-lightbox> 
  Youtube Lightbox
</a>

Enable a trigger element to launch lightbox that loads modal content from inline elements as these:

<a href="#modal" data-lightbox> Modal </a>

<div id="modal" hidden>
  <div class="modal-content">
    <h3>Welcome!</h3>
  </div>
</div>

To create a gallery lightbox for your grouped images:

<a href="1.png" data-lightbox="gallery" data-image-alt="Image 1">
  <img src="thumb-1.png" alt="Thumbnail 1"> 
</a>
<a href="2.png" data-lightbox="gallery" data-image-alt="Image 2">
  <img src="thumb-2.png" alt="Thumbnail 2"> 
</a>
<a href="3.png" data-lightbox="gallery" data-image-alt="Image 3">
  <img src="thumb-3.png" alt="Thumbnail 3"> 
</a>

Changelog:

10/30/2018

• Renders the lightbox right after the element that triggered it

07/04/2018

• Update

06/21/2018

• Add option to programmatically trigger the lightbox
• Remove unnecessary vendor prefixes

06/20/2018

• Add option to programmatically trigger the lightbox