Responsive Justified Image Grid/Gallery Plugin - jQuery imagesGrid

imagesGrid is a super tiny jQuery plugin that helps you create a fully responsive image gallery with justified grid layout.

How to use it:

1. Just load the JavaScript file jquery.imagesGrid.js after jQuery library (slim build) and we're ready to go.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="jquery.imagesGrid.js"></script>

2. Insert your images into the gallery and specify the width/height for each image using data attributes:

<div class="images-grid images-grid-demo">
  <div class="image-wrapper" data-width="500" data-height="450">
    <img class="image-thumb" src="https://placehold.it/500x450/" />
  </div>
  <div class="image-wrapper" data-width="300" data-height="650">
    <img class="image-thumb" src="https://placehold.it/300x650/" />
  </div>
  <div class="image-wrapper" data-width="1024" data-height="768">
    <img class="image-thumb" src="https://placehold.it/1024x768/" />
  </div>
...
</div>

3. Initialize the image grid/gallery with default settings.

$(".images-grid-demo").imagesGrid();

4. Adjust the height of the grid row.

$(".images-grid-demo").imagesGrid({
  rowHeight: 150
});

5. Change the default space between images.

$(".images-grid-demo").imagesGrid({
  margin: 1
});

Change log:

2017-09-04

• JS update

---

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