Fully Responsive Gallery Grid Plugin For jQuery - Loi Gallery Display

Loi Gallery Display is a jQuery plugin used to display a set of photos in a fully responsive and configurable gallery grid.

Features:

• Allows to set specified number of columns and rows on different devices.
• Auto switches images if there is no enough space to display all your photos.
• Pop-ups a fullscreen, navigatable gallery lightbox when you click on a thumbnail.

Basic usage:

1. Load the required stylesheet gallery-display.css in the head section of the document.

<link href="gallery-display.css" rel="stylesheet">

2. Load the Font Awesome 4 for navigation arrows (OPTIONAL).

<link rel="stylesheet" href="font-awesome.min.css">

3. Add your images to the gallery. The data-imagesrc attribute is used to specify the full version of your images to be displayed in the gallery lightbox.

<div id="loiGalleryDisplay">
 <div class="item-cover">
  <div class="item" data-imagesrc="full-1.jpg" data-title="Photo 1">
   <img src="thumb-1.jpg">
  </div>
 </div>
 <div class="item-cover">
  <div class="item" data-imagesrc="full-2.jpg" data-title="Photo 2">
   <img src="thumb-2.jpg">
  </div>
 </div>
 <div class="item-cover">
  <div class="item" data-imagesrc="full-3.jpg" data-title="Photo 3">
   <img src="thumb-3.jpg">
  </div>
 </div>
</div>

4. Initialize the gallery grid with options.

loiGalleryDisplay({

  // the number of rows to display
  displayRows: 2,

  // the number of columns to display
  displayColumns: 4,

  // next / prev navigation buttons
  nextButton : "<i class='fa fa-chevron-right'></i>",
  prevButton : "<i class='fa fa-chevron-left'></i>",

  // settings for different breakpoints
  responsive : 
  [{
    breakpoint: 1199,
    settings:{
    displayRows: 2,
    displayColumns: 3,
    }
  },
  {
    breakpoint: 767,
    settings:{
      displayRows: 1,
      displayColumns: 2,
    }
  },
  {
    breakpoint: 991,
    settings:{
      displayRows: 2,
      displayColumns: 2,
    }
  }],
});

---

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