插件描述：jQuery图像网格 插件imagesgrid.js 小图点击大图轮播

images-grid

使用方法

将图像网格插件 Images grid添加到 html 页

初始化图像网格

$('#imgs').imagesGrid({

images: ['img1.png', ... , 'imgN.png']

});

选项

images {Array}

数组的图像的 Url。数组元素可以是字符串或对象images: [

'hello.png',

'preview.jpg',

{

src: 'car.png',      // url

alt: 'Car',          // 可选文字

title: 'Car',        // 标题

caption: 'Supercar'  // 模态标题

}

]

cells {Number}

在网格中的单元格数。最低为 1，最大 6。(默认┱ 5)cells: 5

align {Boolean}

Aling diff-size图像大小 (默认:false)align: false

nextOnClick {Boolean}

显示下一个图像，当用户点击模态的图像 (默认:true)nextOnClick: true

getViewAllText {Function}

返回函数"查看所有图片"链接文本getViewAllText: function(imagesCount) {

return 'View all ' + imagesCount + ' images';

}

事件

onGridRendered {Function}

网格项添加到 DOM 时调用的函数onGridRendered: function($grid) { }

onGridItemRendered {Function}

当向 DOM 添加网格项时调用的函数onGridItemRendered: function($item, image) { }

onGridLoaded {Function}

网格图像加载时调用的函数onGridLoaded: function($grid) { }

onGridImageLoaded {Function}

网格图像加载时调用的函数onGridImageLoaded: function(event, $img, image) { }

onModalOpen {Function}

当模态打开时调用onModalOpen: function($modal) { }

onModalClose {Function}

模态函数关闭时调用的函数onModalClose: function() { }

onModalImageClick {Function}

函数调用模态图像上单击onModalImageClick: function(event, $img, image) { }

方法

.imagesGrid('modal.open', 0)

打开模态窗口。第二个参数是图像索引$('#imgs').imagesGrid('modal.open', 0)

.imagesGrid('modal.close')

关闭模态窗口$('#imgs').imagesGrid('modal.close')

默认选项

可以重写默认选项// 覆盖单元格的个数

$.fn.imagesGrid.defaults.cells = 6;