Versátil Galería de fotos para móviles-natural Gallery JS

Vista prévia

Descripción

La biblioteca de JavaScript natural Gallery JS le permite crear una galería de fotos responsive, amigable para móviles con lightbox integrada en la Web.

Características

• 4 diseños de Galería: natural, mampostería, cuadrado, y sensible cuadrado.
• Desplazamiento infinito: carga automáticamente más imágenes en la galería de desplazamiento.
• Carga diferida de imagen.
• Mostrar imágenes en una ventana emergente de lightbox. Requiere PhotoSwipe .
• Puede navegar entre las imágenes con eventos de deslizamiento táctil.
• Le permite acercar/alejar imágenes.

Funcionamiento

Instalar & descargar.

# Yarn
$ yarn add @ecodev/natural-gallery-js

# NPM
$ npm install @ecodev/natural-gallery-js --save

Incluya los archivos JavaScript y CSS necesarios en la página.

<link rel="stylesheet" href="/path/to/natural-gallery.full.css">
<link rel="stylesheet" href="/path/to/themes/natural.css">
<script src="/path/to/natural-gallery.full.js" defer></script>

Cree un contenedor para contener la galería de fotos.

<div id="gallery"></div>

Inicializar la galería de fotos.

var myGallery = document.getElementById('gallery');

// Natural Layout
var gallery = new NaturalGallery.Natural(myGallery);

// Masonry Layout
var gallery = new NaturalGallery.Masonry(myGallery);

// Square Layout
var gallery = new NaturalGallery.Square(myGallery);

// Responsive Square Layout
var gallery = new NaturalGallery.ResponsiveSquare(myGallery);

Añadir imágenes a la galería de fotos.

var items = [


 {




thumbnailSrc: 'thumb.jpg',




thumbnailWidth: 400,




thumbnailHeight: 300,




enlargedSrc: 'large.jpg',




enlargedWidth: '1200',




enlargedHeight: '900,




title: 'Image 1',




link: '#',




 linkTarget: '_blank' // _blank | _top | _self | _parent




color: '#ccc' // bg color


};
];

// insert images to the gallery
gallery.setItems(items);

// Add more images
gallery.addItems(itemsSet);

Configuración predeterminada.

var gallery = new NaturalGallery.Natural(myGallery,{



// space between images


gap: 3,



// how many rows per page


rowsPerPage: 0,



// hover, always and never


showLabels: 'hover'





// enable lightbox


lightbox: false,



// photosipw options


photoSwipeOptions: null,



// the number of rows to display when gallery initialises



minRowsAtStart: 2,



// is selectable?


selectable: false,



// the distance from the bottom of the gallery to offset the detection of the scroll event.


infiniteScrollOffset: 0



 });

API methods.

// insert images
gallery.setItems(items)

// add new images
addItems(items)

// add event listener
addEventListener(string, fn)

// clear the gallery
clear()

// select visible images
selectVisibleItems()

 // unselect all images
unselectAllItems()