Tiny Iframe Lightbox Library – lightboxjs

A lightweight and easy-to-use lightbox library that allows you to display external pages or Youtube/Vimeo videos in an iframe lightbox.

How to use it:

1. To get started, load the necessary lightbox files.

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

2. Enable a link to toggle the lightbox.

<a href="file_to_open.html" 
   class="lightboxjs-link" 
   data-width="600" 
   data-height="600">
   OPEN THE LIGHTBOX
</a>

3. It also works with any other element with a data-url attribute:

<div class="lightboxjs-link" 
     data-width="1000" 
     data-height="500" 
     data-url="file_to_open2.html" 
     data-close-with-overlay="0">
     OPEN LIGHTBOX
</div>

4. Embed iframe videos (Youtube, Vimeo, etc.) into the lightbox.

<div class="lightboxjs-link" 
     data-width="1000" 
     data-height="600" 
     data-url="https://player.vimeo.com/video/VIDEO-ID">
     VIMEO VIDEO
</div>

<div class="lightboxjs-link" 
     data-width="1000" 
     data-height="600" 
     data-url="https://www.youtube.com/embed/VIDEO-ID">
     YOUTUBE VIDEO
</div>

5. Open a url in a lightbox directly from the script.

const url = "/path/to/media/";
LightboxJS.openUrl(url);
}

6. Trigger a function when the lightbox is closed.

function lighboxclosed(){
  // do something
}
LightboxJS.onCloseAction = lighboxclosed;

Changelog:

05/17/2024

• added possibility to load an html content into the lightbox

02/02/2024

• changed the z-index of the close button

01/31/2024

• added a callback to call when a lightbox is closed

01/30/2024

• added a static function to open an url in a lightbox directly from script

05/08/2023

• prefixed all css class name with “ljs-” to prevent collisions with pre-existing rules