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

File Size: 12.7 KB
Views Total: 33642
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.

$('#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.