JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit b5adba9 Jul 27, 2017
Failed to load latest commit information.
imgs Thumbnail, closes #14 Apr 19, 2017
src support for concatenate to other plugins Jul 14, 2017
LICENSE.txt Format license, #19 Jul 27, 2017 Update readme Jul 10, 2017
index.html Thumbnail, closes #14 Apr 19, 2017
test.html Remove tabs Feb 2, 2017


Images grid jQuery plugin



Add Images grid plugin to html page

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

Init Images grid

<div id="imgs"></div>
    images: ['img1.png', ... , 'imgN.png']


images {array}

Array of images. Array element can be string or object

images: [
    src: 'car.png',              // url
    alt: 'Car',                  // alternative text
    title: 'Car',                // title
    caption: 'Supercar',         // modal caption
    thumbnail: 'cap-preview.png' // thumbnail image url
cells {number}

Maximum number of cells (min: 1, max: 6, default: 5)

cells: 5
align {boolean}

Align images with different height (default: false)

align: false
nextOnClick {boolean}

Show next image when click on modal image (default: true)

nextOnClick: true
loading {string}

Image loading text (default: 'loading...')

loading: 'loading...'
showViewAll {string|boolean}

Show view all text (default: 'more')

// Possible values:
showViewAll: 'more'   // show if number of images greater than number of cells
             'always' // always show
             false    // never show
viewAllStartIndex {number}

Start image index when view all link clicked (default: 'auto')

viewAllStartIndex: 'auto'
getViewAllText {function}

Callback function returns text for "view all images" link

getViewAllText: function(imagesCount) {
  return 'View all ' + imagesCount + ' images';

Grid Events:

onGridRendered {function}

Callback function fired when grid items added to the DOM

onGridRendered: function($grid) { }
onGridItemRendered {function}

Callback function fired when grid item added to the DOM

onGridItemRendered: function($item, image) { }
onGridLoaded {function}

Callback function fired when grid images loaded

onGridLoaded: function($grid) { }
onGridImageLoaded {function}

Callback function fired when grid image loaded

onGridImageLoaded: function(event, $img, image) { }

Modal Events:

onModalOpen {function}

Callback function called when modal opened

onModalOpen: function($modal, image) { }
onModalClose {function}

Callback function called when modal closed

onModalClose: function() { }
onModalImageClick {function}

Callback function called on modal image click

onModalImageClick: function(event, $img, image) { }
onModalImageUpdate {function}

Callback function called when modal image updated

onModalImageUpdate: function($img, image) { }


Open modal window (optional second parameter is image index)

$('#imgs').imagesGrid('', 0)

Close modal window


Destroy images grid (remove DOM nodes and event listeners)


Default options

Default options can be found here