images-grid

Images grid jQuery plugin

Demo

Usage

Add Images grid plugin to html page (or use CDN links)

<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

CDN links

<script src="https://cdn.jsdelivr.net/gh/taras-d/images-grid/src/images-grid.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/taras-d/images-grid/src/images-grid.min.css">