Elegante cualquier galería de contenido Lightbox en Pure JavaScript-GLightbox

Vista prévia

Descripción

GLightbox es un plugin lightbox simple pero potente y amigable para móviles, escrito en JavaScript puro y CSS/CSS3.

Características

• Animaciones de apertura/cierre: zoomIn, fade y zoom.
• Animaciones de diapositivas de contenido: fundido, diapositiva, zoom.
• Soporta cualquier contenido e incluso contenido mixto: imágenes, videos HTML5, videos de YouTube/Vimeo, iframes, contenidos en línea y mucho más.
• Muchas opciones de configuración, funciones de devolución de llamada y métodos de API.

Funcionamiento

Importe el ' glightbox. css ' y ' glightbox. js ' en el documento.

<link href="dist/css/glightbox.css" rel="stylesheet">
<script src="dist/js/glightbox.js"></script>

Especifique el contenido que se cargará en el lightbox de la galería mediante el atributo ' href '. Tenga en cuenta que el contenido multimedia agrupado debe tener la misma clase.

<a href="https://vimeo.com/115041822" class="glightbox-demo">

<img src="https://picsum.photos/400/300/?random" alt="image">
</a>

<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12085.977306439116!2d-73.96648875371474!3d40.77314541916876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258bf08488f6b%3A0x618706a9142daa0d!2sUpper+East+Side%2C+Nueva+York%2C+EE.+UU.!5e0!3m2!1ses-419!2smx!4v1511830027642" class="glightbox-demo">

<img src="https://picsum.photos/401/300/?random" alt="image">
</a>

<a href="https://www.youtube.com/watch?v=Ga6RYejo6Hk" class="glightbox-demo">

<img src="https://picsum.photos/402/300/?random" alt="image">
</a>

Para crear Facebook como Galería lightbox con las casillas de Descripción:

<a href="1.jpg" class="glightbox-demo" data-glightbox="title:Description Bottom; description: You can set the position of the desciption">

<img src="thumb.jpg" alt="image">

<div class="glightbox-desc">


<p>Description here</p>

</div>
</a>

Inicializa la biblioteca de Glightbox y listo.

var myLightbox = GLightbox({


'selector': 'glightbox-demo'
});

Aquí hay una lista de todas las opciones posibles y funciones de devolución de llamada para personalizar la lightbox de la galería.

selector: 'glightbox',
skin: 'clean',
closeButton: true,
startAt: 0,
autoplayVideos: true,
descPosition: 'bottom',
width: 900,
height: 506,
videosWidth: 900,
videosHeight: 506,
beforeSlideChange: null,
afterSlideChange: null,
beforeSlideLoad: null,
afterSlideLoad: null,
onOpen: null,
onClose: null,
loopAtEnd: false,
jwplayer: {

api: null,

licenseKey: null,

params: {



width: '100%',



aspectratio: '16:9',



stretching: 'uniform'

}
},
vimeo: {

api: 'https://player.vimeo.com/api/player.js',

params: {



api: 1,



title: 0,



byline: 0,



portrait: 0

}
},
youtube: {

api: 'https://www.youtube.com/iframe_api',

params: {



enablejsapi: 1,



showinfo: 0

}
},
openEffect: 'zoomIn', // fade, zoom
closeEffect: 'zoomOut', // fade, zoom
slideEffect: 'slide', // fade, slide, zoom,
moreText: 'See more',
slideHtml: '',
lightboxHtml: '',
cssEfects: {

fade: { in: 'fadeIn', out: 'fadeOut' },

zoom: { in: 'zoomIn', out: 'zoomOut' },

slide: { in: 'slideInRight', out: 'slideOutLeft' },

slide_back: { in: 'slideInLeft', out: 'slideOutRight' }
}

API methods.

// Goto slide 3
myLightbox.goToSlide(3);
​
// back to prev slide
myLightbox.prevSlide();
​
// goto next slide
myLightbox.nextSlide();
​
// get active slide
myLightbox.getActiveSlide();
​
// close the gallery lightbox
myLightbox.close();

Registro de cambios

02/17/2019

• Se eliminó variable de cuerpo global

02/15/2019

• delegar permisos a iframes entre orígenes

02/07/2019

• Mejora de reproducción automática de vídeo

02/05/2019

• Correcciones de errores y mejoras

v1.0.9 (12/06/2018)

• SVG añadido que se mostrará como una imagen
• Solucionado el error en IE11 – varias definiciones de una propiedad no permitidas

v1.0.8 (10/16/2018)

• Correcciones y mejoras

v1.0.7 (09/02/2018)

• Correcciones y mejoras

v1.0.6 (06/08/2018)

• Correcciones de errores y mejoras