Material inspirado Nice sensible Galería de fotos

Vista prévia

Descripción

Material Photo Gallery es un plugin de JavaScript Vanilla que le ayuda a generar una cuadrícula de miniaturas agradable y sensible como se ve en la búsqueda de imágenes de Google.

Material Photo Gallery es un plugin de JavaScript Vanilla que le ayuda a generar una cuadrícula de miniaturas agradable y sensible como se ve en la búsqueda de imágenes de Google.

Funcionamiento

Material Photo Gallery es un plugin de JavaScript Vanilla que le ayuda a generar una cuadrícula de miniaturas agradable y sensible como se ve en la búsqueda de imágenes de Google.

<link rel="stylesheet" href="material-photo-gallery.css">

Envuelva un grupo de imágenes en miniatura en la cuadrícula como se muestra a continuación. Puede usar el atributo Full de datos para definir las imágenes de tamaño completo.

<div class="m-p-g">

<div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">


<img src="thumb-1.jpg" data-full="full-1.jpg" class="m-p-g__thumbs-img" />


<img src="thumb-2.jpg" data-full="full-2.jpg" class="m-p-g__thumbs-img" />


<img src="thumb-3.jpg" data-full="full-3.jpg" class="m-p-g__thumbs-img" />


...

</div>


<div class="m-p-g__fullscreen"></div>
</div>

Cargue el archivo JavaScript material-Photo-Gallery. js en la parte inferior del documento.
inicializar la rejilla de miniaturas y activar la lightbox de la galería.

var elem = document.querySelector('.m-p-g');

document.addEventListener('DOMContentLoaded', function() {

var gallery = new MaterialPhotoGallery(elem);
});

Registro de cambios

10/24/2018

• añadido gestos de deslizamiento admiten