/images-grid

Images grid jQuery plugin

Primary LanguageJavaScript

images-grid

Images grid jQuery plugin

Demo

Usage

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>
<script>
  $('#imgs').imagesGrid({
    images: ['img1.png', ... , 'imgN.png']
  });
</script>

Options

images {array}

Array of images. Array element can be string or object

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
  }
]
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) { }

Methods:

modal.open

Open modal window (optional second parameter is image index)

$('#imgs').imagesGrid('modal.open', 0)
modal.close

Close modal window

$('#imgs').imagesGrid('modal.close')
destroy

Destroy images grid (remove DOM nodes and event listeners)

$('#imgs').imagesGrid('destroy')

Default options

Default options can be found here