Facebook-like Photo Grid Plugin With jQuery - images-grid

File Size: 12.7 KB
Views Total: 33831
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Facebook-like Photo Grid Plugin With jQuery - images-grid

images-grid is a jQuery plugin which allows to display first x (1-6) images of your gallery in a grid view as you seen on Facebook timeline. Click on the thumbnail will display all images in a fullscreen, navigatable modal popup just like the gallery lightbox.

How to use it:

1. Include jQuery library together with the images-grid.js and images-grid.css on the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/images-grid.js"></script>
<link rel="stylesheet" href="src/images-grid.css">

2. Create a container for the photo grid.

<div id="gallery"></div>

3. Call the function and insert your photos in the images array as follows.

  images: [

4. More configuration options.


  // an array of images
  images: [
      src: 'car.png',      // url
      alt: 'Car',          // alternative text
      title: 'Car',        // title
      caption: 'Supercar',  // modal caption
      thumbnail: 'cap-preview.png' // thumbnail image url
  // algin images with different sizes
  align: false,

  // max grid cells (1-6)
  cells: 5, 

  // goto next image on click
  nextOnClick: true,

  // text for show more
  showViewAll: 'more',

  // returns text for "view all images" link if images more than five
  getViewAllText: function() {},

  // callbacks
  onGridRendered: $.noop,
  onGridItemRendered: $.noop,
  onGridLoaded: $.noop,
  onGridImageLoaded: $.noop,
  onModalOpen: $.noop,
  onModalClose: $.noop,
  onModalImageClick: $.noop,
  onModalImageUpdate: $.noop

Change log:


  • support for concatenate to other plugins


  • Add thumbnail images and full size images


  • Show view all option
  • Added callback for updateImage


  • Show view all option


  • Supports jQuery 3+.


  • Move ImagesGridModal methods to the prototype


  • Modal image loader


  • small fixes


  • Caption to images


  • Extra options, image attributes


  • Fixed image jump over bug

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