Responsive Image Gallery Plugin – Row Grid

rowGrid is a lightweight jQuery plugin to display images in ordered rows with auto spacing and resizing. It is used to create nice looking image gallery. It helps creating beautifull responsive image gallery with jquery. It also support infinite scrolling of image galleries.

Size is 800 bytes.

image-grid-plugin

The grid is similar to grids on Google Image Search, flickr, shutterstock and Google+ images.

Features:

  • responisve
  • infinite scrolling

Download : https://github.com/brunjo/rowGrid.js/zipball/master

 

Installation

Include jquery and the plugin into the webpage.

<script src="path/to/jquery.min.js" >
<script src="path/to/jquery.row-grid.min.js" >

 

HTML:

<div>
  <div>
    <img src="path/to/image" width="120" height="100" />
  </div>
  <div>
    <img src="path/to/image" width="130" height="100" />
  </div>
  ...
</div>

CSS:

.container {
  background: #eee;
}
/* clearfix */
.container:before,
.container:after {
    content: "";
    display: table;
}
.container:after {
    clear: both;
}

.item {
  float: left;
  margin-bottom: 10px; 
}
.item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
.first-item {
  clear: both;
}
/* remove margin bottom on last row */
.last-row, .last-row ~ .item {
  margin-bottom: 0;
}

JS:

$(document).ready(function() {
  var options = {minMargin: 5, maxMargin: 15, itemSelector: ".item", firstItemClass: "first-item"};
  $(".container").rowGrid(options);
});

Leave a Reply