Galería adaptable compatible con dispositivos móviles-HesGallery

Vista prévia

Descripción

HesGallery es una galería de fotos de JavaScript ligero, adaptable, amigable para móviles & plugin de lightbox de imagen para estilo de vida, portafolio, viajes, moda, arte, fotografía y cualquier otro tipo de sitios web y blogs sorprendentes.

El plugin muestra un grupo de imágenes como una ventana emergente de la galería donde los usuarios son capaces de navegar entre las imágenes haciendo clic en las flechas de navegación (escritorio) o tocando las imágenes (móvil).

Licenciado bajo el CC BY-NC-ND 4,0 .

Funcionamiento

Para empezar, inserte los archivos del plugin HesGallery en el documento.

<link rel="stylesheet" href="hes-gallery.css">
<script src="hes-gallery.js"></script>

Agregue las imágenes a la galería de la siguiente manera. Atributos de datos disponibles:

• Data-Subtext: Caption de imagen
• datos-Alt: texto alternativo
• Data-Disabled: desactivar esta imagen
• Data-Fullsize: tamaño completo
• Data-Wrap: bucle infinito
• Data-IMG-Count: el número de imágenes

<div class="hes-gallery"


 data-wrap="true"


 data-img-count="3">

<img src="1.jpg"




alt="image1"




data-subtext="Descrition 1"




 data-alt="Alt 1">

<img src="2.jpg"




alt="image2"




data-subtext="Descrition 2"




 data-alt="Alt 2"



 data-disabled="true">

<img src="3.jpg"




alt="image3"




data-subtext="Descrition 3"




 data-alt="Alt 3">
</div>

Decida si desea mostrar el recuento en la ventana emergente de la galería.

<div class="hes-gallery" data-img-count="false">

...
</div>

Eso es todo. Puede anular la configuración predeterminada para personalizar la galería.

HesGallery.setOptions({


// disable scrolling when the popup is activated

disableScrolling: false,


// self-hosted styles

hostedStyles: false,


// enable/disable animation

animations: true,


// enable/disable keyboard navigation

keyboardControl: true,


// disable the plugin when the screen size is smaller than this value

minResolution: 0,


// enable/disable infinite loop

wrapAround: false,


// show/hide image count

showImageCount: true

});

API methods.

// Shows n photo from m gallery
HesGallery.show(m, n)

 // goes to next
HesGallery.next()

// backs to previous
HesGallery.prev()

// hides the gallery
HesGallery.hide()

Registro de cambios

v1.4.6 (03/31/2019)

• cambios menores

01/13/2019

• El código refactoriza