Ligera Galería de imágenes responsive & biblioteca lightbox-saga-Gallery

Vista prévia

Descripción

Sin embargo, otra biblioteca de JavaScript de la Galera de lightbox utilizada para mostrar sus imágenes en una ventana emergente de galería de estilo lightbox donde los usuarios pueden navegar entre imágenes a través de la navegación de flechas y teclado.

Funcionamiento

Añade los archivos JavaScript y CSS de la saga-Galería a la página HTML.

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

Inserte sus imágenes en una lista HTML desordenada como esta:

<ul id="gallery">

<li>


<img src="1.jpg" alt="Product Image 1">



<div class="saga-description"><h3>Lorem</h3><p>Ipsum dolor sit amet</p></div>

</li>

<li><img src="2.jpg" alt="Product Image 2"></li>

<li><img src="3.jpg"" alt="Product Image 3"></li>

<li><img src="4.jpg"" alt="Product Image 4"></li>
</ul>

Crea un nuevo objeto SagaGallery y terminamos.

var gallery = new SagaGallery('gallery');

Configuraciones predeterminadas de la biblioteca SagaGallery.

var gallery = new SagaGallery('gallery',{



// called after closing


onClose: null,



 // called after opening


onOpen: null,




// return to the first image after the last image is reached


loop: true





 });

API methods.

// open gallery
gallery.open();

// close gallery
gallery.close();

// check if gallery is opened
if (gallery.isOpen())


 // do something ...

// display next image
gallery.next();

// display prev image
gallery.prev();