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.

$('#gallery').imagesGrid({
  images: [
    'photos/1.jpg',
    'photos/2.jpg',
    'photos/3.jpg',
    'photos/4.jpg',
    'photos/5.jpg',
    'photos/6.jpg'
  ]
});

4. More configuration options.

$('#gallery').imagesGrid({

  // an array of images
  images: [
    'hello.png',
    'preview.jpg',
    {
      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:

2017-07-15

• support for concatenate to other plugins

2017-04-20

• Add thumbnail images and full size images

2017-04-19

• Show view all option
• Added callback for updateImage

2017-04-12

• Show view all option

2017-02-02

• Supports jQuery 3+.

2016-09-02

• Move ImagesGridModal methods to the prototype

2016-08-25

• Modal image loader

2016-08-20

• small fixes

2016-07-29

• Caption to images

2016-07-26

• Extra options, image attributes

2016-07-17

• 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.