Lightweight Responsive Image Gallery & Lightbox Library – saga-gallery

Preview:

Description:

Yet another lightbox galley JavaScript library used for showcasing your images in a lightbox-style gallery popup where the users are able to navigate between images through arrow and keyboard navigation.

How to use it:

Add the saga-gallery’s JavaScript and CSS files to the html page.

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

Insert your images into an unordered html list as this:

<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>

Create a new SagaGallery object and we’re done.

var gallery = new SagaGallery('gallery');

Default configurations of the SagaGallery library.

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();