Tiny Iframe Lightbox Library – lightboxjs

Preview:

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>

Changelog:

05/08/2023

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