jQuery响应式图像网格images-grid

所属分类:UI-布局,弹出层

 8455  48  查看评论 (7)
jQuery响应式图像网格images-grid ie兼容9

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)

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;



相关插件-布局,弹出层

Delta html5模板 Bootstrap 响应式网站前端源码

一个优秀的展示网站为你产品的销售带来更多的亮点,模板简单明了的,只需要简单的更换内容,你的网站就可以直接上线运营。
  布局
 7946  109

强力推荐一款强大布局插件-FERROSLIDER

FerroSlider是一款强大的全局布局插件,允许我们通过滑动切换整个页面来显示内容,能让我们快速地布局出一个酷炫的网站,是一个很有用的jqeury插件。
  布局
 17084  35

电商服装网站模板

电商服装网站响应式模板
  布局
 8773  147

jQuery css3动画响应式网站模板

紫色背景大气css3动画响应式网站模板
  布局
 2934  32

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币

    飞奔的企鹅 0
    2017/4/10 16:25:27

    怎么兼容ie8呢?知道的大神指点一下,谢啦~

    回复
    silva 0
    2017/2/24 15:06:39
    YangAII 0
    2017/2/3 15:38:55
    很好,只是要付费 回复
    飞奔的企鹅 0
    2017/1/13 16:01:12

    插件很不错,使用简单方便,谢谢分享

    回复
    Deja vu 0
    2016/12/1 14:12:59
    cvsfeng 0
    2016/9/27 13:09:28
    苹果 0
    2016/9/22 17:09:20
取消回复