Handy Slideshow-style Image Gallery Plugin For jQuery - gallery.js

gallery.js is a simple,handy jQuery gallery plugin to showcase your images in a slideshow-style lightbox popup where the users are able to switch between images with navigation arrows and/or keyboard interactions.

How to use it:

1. Create the html for the slideshow-style lightbox popup.

<div id="slideshow">
  <ul class="controls">
    <li class="control previous">
      <a href="#" title="Previous">Previous</a>
    </li>
    <li class="control next">
      <a href="#" title="Next">Next</a>
    </li>
    <li class="control close">
      <a href="#" title="Close">Close</a>
    </li>
  </ul>
  <div class="current">
    <div class="image"></div>
    <p class="caption"></p>
  </div>
</div>

2. Create a list of thumbnails and wrap them into a links pointing to the large images.

<div id="gallery">
  <ul class="images thumbnails">
    <li class="even image thumbnail">
      <a href="1.jpg" title="1.jpg"><img src="1-s.jpg" alt="1.jpg" title="1.jpg"></a>
    </li>
    <li class="odd image thumbnail">
      <a href="2.jpg" title="2.jpg"><img src="2-s.jpg" alt="2.jpg" title="2.jpg"></a>
    </li>
    <li class="even image thumbnail">
      <a href="3.jpg" title="3.jpg"><img src="3-s.jpg" alt="3.jpg" title="3.jpg"></a>
    </li>
    <li class="odd image thumbnail">
      <a href="4.jpg" title="4.jpg"><img src="4-s.jpg" alt="4.jpg" title="4.jpg"></a>
    </li>
  </ul>
</div>

3. Load jQuery library and the main JS file gallery.js in the document.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="gallery.js"></script>

4. Create a new Gallery instance as this.

var gallery = new Gallery({
    elements: {
      slideshow: '#slideshow',
      currentImage: '#slideshow .current .image',
      currentCaption: '#slideshow .current .caption',
      thumbnailAnchor: '#gallery .thumbnails .thumbnail a',
      previousAnchor: '#slideshow .previous a',
      nextAnchor: '#slideshow .next a',
      closeAnchor: '#slideshow .close a',
    }
});

5. Let's start to style the gallery lightbox in the CSS:

#slideshow {
  background-color: rgba(0, 0, 0, 0.75);
  display: none;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

#slideshow .current .image, #slideshow .controls .previous, #slideshow .controls .next {
  height: 500px;
  margin: 78px 0 0;
}

#slideshow .current .image, #slideshow .current .caption { text-align: center; }

#slideshow .current .caption {
  color: #f1eeee;
  padding: 20px 0 0;
}

#slideshow .controls { position: relative; }

#slideshow .controls .control { position: absolute; }

#slideshow .controls .previous, #slideshow .controls .next {
  top: 0;
  width: 50%;
}

#slideshow .controls .previous { left: 0; }

#slideshow .controls .next { right: 0; }

#slideshow .controls .close {
  height: 48px;
  right: 0;
  top: 0;
  width: 62px;
}

#slideshow .controls .control a {
  color: transparent;
  display: block;
}

#slideshow .controls .previous a, #slideshow .controls .next a {
  height: 500px;
  width: auto;
}

#slideshow .controls .previous a {
  background-image: url(previous.png);
  background-position: 25% center;
  background-repeat: no-repeat;
}

#slideshow .controls .next a {
  background-image: url(next.png);
  background-position: 75% center;
  background-repeat: no-repeat;
}

#slideshow .controls .close a {
  background-image: url(close.png);
  background-position: 50% center;
  background-repeat: no-repeat;
  height: 48px;
  width: 48px;
}

---

This awesome jQuery plugin is developed by simonsablowski. For more Advanced Usages, please check the demo page or visit the official website.