THEMETRIAL

Easy Tiny iFrame Lightbox In Pure JavaScript – Iframe-Lightbox

Author:englishextra
Views Total:8 views
Official Page:Go to website
Last Update:April 10, 2021
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="https://www.cssscript.com/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="https://www.cssscript.com/javascript:void(0);"
   class="iframe-lightbox-link"
   href="https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0"
   >
   YouTube
</a>

<a href="https://www.cssscript.com/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="https://www.cssscript.com/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:

04/10/2021

11/22/2020

v0.2.8 (12/23/2018)

  • Fixed body scroll disabling on lightbox open

v0.2.8 (12/23/2018)

  • Fixed body scroll disabling on lightbox open

v0.2.6 (12/21/2018)

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

Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.