Home » Javascript » Responsive Image Gallery Plugin – Row Grid

Responsive Image Gallery Plugin – Row Grid

Sponsored

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);
});

Sponsored

I am a Full stack Web Developer. I'm interested in Web Designing and passionate towards FOSS. I love Linux and like to promote it. A quick leaner, quick implementer, not away from errors, staying for software and knowledge freedom and doing programming in PHP, Mysql, Postgresql, Laravel, Angulajs and more..

Leave a Reply

Your email address will not be published. Required fields are marked *