Responsive Photo Gallery & Lightbox – FG-Gallery

Preview:

Description:

FG-Gallery is a lightweight, easy-to-use and responsive JavaScript gallery library where the users are able to browse all images in a lightbox popup with arrows navigation.

How to use it:

Insert the FG-Gallery’s JavaScript and Stylesheet into the document.

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

Insert your images to the gallery.

<div class="fg-gallery">
  <img src="images/1.jpg" alt="">
  <img src="images/2.jpg" alt="">
  <img src="images/3.jpg" alt="">
  <img src="images/4.jpg" alt="">
  <img src="images/5.jpg" alt="">
  <img src="images/6.jpg" alt="">
  <img src="images/7.jpg" alt="">
  <img src="images/8.jpg" alt="">
</div>

Initialize the gallery, set the number of columns and apply your own CSS styles as follows:

var myGallery = new FgGallery('.fg-gallery', {
    cols: 4,
    style: {
      border: '10px solid #fff',
      height: '180px',
      boxShadow: '0 2px 10px -5px #000'
    }
})