Lightbox mínimo de cualquier contenido en Pure JS-microlightbox

Vista prévia

Descripción

microlightbox es un plugin de lightbox de JavaScript mínimo para mostrar cualquier contenido HTML en una ventana emergente adaptable con una superposición configurable.

Funcionamiento

Cargue la hoja de estilos ' microlightbox. css ' y JavaScript ' microlightbox. js ' cuando sea necesario.

<link rel="stylesheet" href="microlightbox.css">
<script src="microlightbox.min.js"></script>

Cree un enlace de imagen para alternar un lightbox de imagen.

<a id="example" href="1.jpg">Click Me</a>

microlightbox(document.getElementById("example"), {

title:"Lightbox Title"
});

O mostrar directamente el lightbox de imagen sin ningún elemento de alternancia.

microlightbox("1.jpg", {

type:"image"
});

Cree un vínculo para alternar un lightbox que cargue el contenido de un elemento insertado.

<a id="inline" href="#html">Click Me</a>

<div id="html" style="display:none">

Any HTML Content Here
</div>

microlightbox(document.getElementById("inline"),{

// OPTIONS HERE
});

Todas las opciones predeterminadas para personalizar la ventana emergente de lightbox.

{


// 'auto', 'image', 'html' or 'inline'

type: 'auto',


// lightbox title

title: '',


// position of title

titlePosition: 'auto',


// in pixels

padding: 10,

margin: 20,

minWidth: 100,

minHeight: 100,

maxWidth: 0,

maxHeight: 0,


// background color

overlayColor: 'rgba(0,0,0,0.7)',


// only for type=='image'

imgWidth: 0,

imgHeight: 0


}

Registro de cambios

10/01/2018

• pequeños cambios

07/08/2018

• Actualización de CSS