Cuadrícula de miniaturas de estilo de imágenes de Google con Pure JavaScript-FlexImages

Vista prévia

Descripción

FlexImages es una librería JavaScript simple de vainilla para crear una galería de miniaturas fluida y sensible que soporta imágenes, videos, iframes, texto plano y más. Inspirado en Flickr y Google Images.

Más características

• Carga diferida de imagen/iFrame.
• Compatibilidad con AJAX para un desplazamiento infinito.
• Totalmente adaptable para cualquier dispositivo.

Funcionamiento

Incluya Flex-images. CSS y Flex-images. js en el documento.

<link rel="stylesheet" href="flex-images.css">
<script src="flex-images.js"></script>

Inserte un conjunto de imágenes en el documento. Utilice los atributos Data-w y Data-h para especificar la anchura/altura de las miniaturas.

<div id="demo" class="flex-images">

<div class="item" data-w="219" data-h="180"><img src="1.jpg"></div>

<div class="item" data-w="279" data-h="180"><img src="2.jpg"></div>

<div class="item" data-w="270" data-h="180"><img src="3.jpg"></div>

<div class="item" data-w="270" data-h="180"><img src="4.jpg"></div>

<div class="item" data-w="147" data-h="180"><img src="5.jpg"></div>

<div class="item" data-w="276" data-h="180"><img src="6.jpg"></div>

...
</div>

Inicializar la galería de miniaturas.

new flexImages({selector: '#demo', rowHeight: 140});

Opciones disponibles.

new flexImages({

// Required selector for container or DOM element that holds the individual images/objects.
selector: '#demo',

// Selector of the individual image/object containers.
container: '.item',

// Selector of the image/object inside a container.
object
'img',

// Maximum height of a row.
rowHeight: 180,

// Maximum number of rows to display. Images/Objects exceeding this row are hidden.
maxRows: null,

// Hide incomplete last row of images/objects.
truncate: false

 });