Lightweight Responsive Image Gallery & Lightbox Library – saga-gallery

Category: Gallery , Javascript , Modal & Popup | November 1, 2016
Views Total:2,658 views
Official Page:Go to website
Last Update:November 1, 2016


Lightweight Responsive Image Gallery & Lightbox Library – saga-gallery


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">
    <img src="1.jpg" alt="Product Image 1">
      <div class="saga-description"><h3>Lorem</h3><p>Ipsum dolor sit amet</p></div>
  <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>

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;
// close gallery
// check if gallery is opened
if (gallery.isOpen()) 
    // do something ...
// display next image;
// display prev image

You Might Be Interested In:

Leave a Reply