jQuery响应式图像网格images-grid

查看演示立即下载

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

images-grid

使用方法

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

<scriptsrc="src/images-grid.js"></script>
<linkrel="stylesheet"href="src/images-grid.css">

初始化图像网格

<div id="imgs"></div>
<script>
  $('#imgs').imagesGrid({
    images: ['img1.png', ... , 'imgN.png']
  });
</script>

选项

images {Array}

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

images: [
  'hello.png',
  'preview.jpg',
  {
    src: 'car.png',      // url
    alt: 'Car',          // 可选文字
    title: 'Car',        // 标题
    caption: 'Supercar'  // 模态标题
  }
]

cells {Number}

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

1	`cells: 5`

align {Boolean}

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

1	`align:` `false`

nextOnClick {Boolean}

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

1	`nextOnClick:` `true`

getViewAllText {Function}

返回函数"查看所有图片"链接文本

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

事件

onGridRendered {Function}

网格项添加到 DOM 时调用的函数

1	`onGridRendered:` `function($grid) { }`

onGridItemRendered {Function}

当向 DOM 添加网格项时调用的函数

1	`onGridItemRendered:` `function($item, image) { }`

onGridLoaded {Function}

网格图像加载时调用的函数

1	`onGridLoaded:` `function($grid) { }`

onGridImageLoaded {Function}

网格图像加载时调用的函数

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

onModalOpen {Function}

当模态打开时调用

1	`onModalOpen:` `function($modal) { }`

onModalClose {Function}

模态函数关闭时调用的函数

1	`onModalClose:` `function() { }`

onModalImageClick {Function}

函数调用模态图像上单击

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

方法

.imagesGrid('modal.open', 0)

打开模态窗口。第二个参数是图像索引

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

.imagesGrid('modal.close')

关闭模态窗口

1	`$('#imgs').imagesGrid('modal.close')`

默认选项

可以重写默认选项

// 覆盖单元格的个数
$.fn.imagesGrid.defaults.cells = 6;

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery css3垂直导航
下一个特效： groutek较通用响应式前台模板