Tiny Iframe Lightbox Library – lightboxjs

Category: Javascript , Modal & Popup | February 2, 2024
Author:binouze
Views Total:111 views
Official Page:Go to website
Last Update:February 2, 2024
License:MIT

Preview:

Tiny Iframe Lightbox Library – lightboxjs

Description:

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 an url in a lightbox directly from 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:

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

You Might Be Interested In:


Leave a Reply