Easy Tiny iFrame Lightbox en JavaScript puro-iframe-lightbox

Vista prévia

Descripción

Iframe-LightBox es una sencilla y ligera biblioteca de JavaScript que proporciona una caja de luz táctil, adaptable y personalizable para contenido iframe, por ejemplo, reproductores de vídeo de YouTube y Vimeo.

Más características

• Cargando Spinner.
• Relación de aspecto personalizado.

Instalación

# NPM
$ npm install iframe-lightbox

# Bower
$ bower install iframe-lightbox

Funcionamiento

Agregue los archivos JavaScript y CSS de iframe-lightbox al archivo HTML.

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

Cree un vínculo de desencadenador y especifique la dirección URL que se cargará en los atributos del cuadro de luz de iframe uisng ' href ' de la siguiente manera:

<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>

...

Inicialice la lightbox de iframe y ya terminamos.

[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {

el.lightbox = new IframeLightbox(el);
});

También se le permite establecer el espacio inferior usando el atributo ' Data-padding-Bottom ':

<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


 }

 });
}

Registro de cambios

v0.2.8 (12/23/2018)

• Desactivación del desplazamiento del cuerpo fijo en la lightbox abierta

v0.2.6 (12/21/2018)

• Se corrigió la minificación de CSS

v0.2.5 (12/20/2018)

• Agregado soporte de eventos táctiles

v0.2.4 (12/18/2018)

• Se ha reorginizado el árbol de archivos de la biblioteca

v0.2.3 (12/18/2018)

• Datos modificados: src (que sigue siendo compatible con la compatibilidad) con href como origen para el contenido de iframe

v0.2.2 (12/16/2018)

• Se agregó Data-scrolling = "true", una alternativa a la propiedad de opción de desplazamiento existente con true

v0.2.0 (12/16/2018)

• Se ha cambiado el z-index 999999 para jugar bien con wp-admin
• Imágenes de la interfaz de usuario de CSS retina Ready, sin las externas, eliminadas las imágenes SVG y Base64 inalineadas

v0.1.9 (12/16/2018)

• corregir el fondo cuando iframe está activo

v0.1.8 (12/15/2018)

• Se agregó el botón cerrar
• Cierra el ESC
• Añadida opción de desplazamiento

v0.1.7 (06/02/2018)

• Agregada opción de devolución de llamada onClosed