Easy Tiny iFrame Lightbox In Pure JavaScript – Iframe-Lightbox

Category: Javascript , Modal & Popup | December 23, 2018
Author: englishextra
Views Total: 2,171
Official Page: Go to website
Last Update: December 23, 2018
License: MIT

Preview:

Easy Tiny iFrame Lightbox In Pure JavaScript – Iframe-Lightbox

Description:

Iframe-Lightbox is a simple, lightweight JavaScript library that provides a responsive, customizable, touch-enabled lightbox for iframe content, e.g. Youtube and Vimeo video players.

More features:

  • Loading spinner.
  • Custom aspect ratio.

Installation:

# NPM
$ npm install iframe-lightbox

# Bower
$ bower install iframe-lightbox

How to use it:

Add the Iframe-Lightbox’s JavaScript and CSS files to the html file.

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

Create a trigger link and specify the URL to be loaded in the iframe lightbox uisng ‘href’ attributes as follows:

<a href="javascript:void(0);"
   class="iframe-lightbox-link"
   href="https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0"
   >
   YouTube
</a>

<a href="javascript:void(0);"
   class="iframe-lightbox-link"
   href="https://player.vimeo.com/video/28629415?autoplay=false"
   >
   Vimeo
</a>

...

Initialize the iframe lightbox and we’re done.

[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {
  el.lightbox = new IframeLightbox(el);
});

You’re also allowed to set the bottom space using ‘data-padding-bottom’ attribute:

<a href="javascript:void(0);"
   class="iframe-lightbox-link"
   href="https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0"
   data-padding-bottom="56.25%"
   >
   YouTube
</a>

Event handlers available:

document.getElementsByClassName("iframe-lightbox-link"), function (el) {
   el.lightbox = new IframeLightbox(el, {
     onLoaded: function (iframe) {
      // on loaded
     },
     onCreated: function (instance) {
      // on created
     },
     onOpened: function (instance) {
      // on opened
     },
     onClosed: function (instance) {
      // on closed
     }
   });
}

Changelog:

v0.2.8 (12/23/2018)

  • Fixed body scroll disabling on lightbox open

v0.2.6 (12/21/2018)

  • Fixed CSS minification

v0.2.5 (12/20/2018)

  • Added touch events support

v0.2.4 (12/18/2018)

  • Reorginized the file tree of the library

v0.2.3 (12/18/2018)

  • Changed data-src (which is still supported for compatibility) to href as the source for iframe content

v0.2.2 (12/16/2018)

  • Added data-scrolling=”true”, an alternative to existing scrolling option property with true

v0.2.0 (12/16/2018)

  • Changed z-index 999999 to play well with wp-admin
  • Pure CSS Retina Ready UI images, no external ones, removed inlined SVG and base64 images

v0.1.9 (12/16/2018)

  • fix background when iframe is active

v0.1.8 (12/15/2018)

  • Added Close button
  • Closes on ESC
  • Added scrolling option

v0.1.7 (06/02/2018)

  • Added onClosed callback option

You Might Be Interested In:

Leave a Reply