在线建站培训
您的位置: 魔客吧站长论坛网页特效查看内容

仿Facebook网格图片jquery插件

轮子 发表于 5 天前 | 栏目:网页特效
网站特效
效果: 图片 
脚本: jQuery特效 
本帖最后由 轮子 于 2017-4-21 13:17 编辑

201704201527.jpg

简要教程   
   images-grid.js是一款仿Facebook网格图片画廊jquery插件。该网格图片画廊在一组图片中是会显示前面1-6幅图片,所有图片以网格进行排列布局。当用户点击某张图片之后,会以全屏轮播图的方式展示所有的图片。

使用方法
   在页面中引入jquery.min.js、images-grid.js文件以及样式文件images-grid.css。
   <link rel="stylesheet" href="src/images-grid.css">     <script type="text/javascript" src="path/to/jquery.min.js"></script>  <script src="src/images-grid.js"></script>        

HTML结构
   使用一个<div>来作为网格图片画廊的容器。
   <div id="imgs"></div>  

初始化插件
   在页面DOM元素加载完毕之后,通过下面的方法来初始化images-grid.js网格图片画廊插件。
   $('#imgs').imagesGrid({     images: ['img1.png', ... , 'imgN.png'] });   
配置参数
   images-grid.js网格图片画廊插件的可用配置参数如下。
   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   } ]                     


QQ图片20170421131009.png


事件
网格事件


1、onGridRendered {function}:当网格中的所有图片都被添加到DOM中时的回调函数。
onGridRendered: function($grid) { }

2、onGridItemRendered {function}:当网格中的某张图片被添加到DOM中时的回调函数。
onGridItemRendered: function($item, image) { }

3、onGridLoaded {function}:当所有图片都被加载后的回调函数。
onGridLoaded: function($grid) { }

4、onGridImageLoaded {function}:当某张图片被加载时的回调函数。
onGridImageLoaded: function(event, $img, image) { }

模态窗口事件

1、onModalOpen {function}:模态窗口打开时的回调函数。
onModalOpen: function($modal, image) { }

2、onModalClose {function}:模态窗口关闭时的回调函数。
onModalClose: function() { }

3、onModalImageClick {function}:模态窗口中的图片被点击时的回调函数。
onModalImageClick: function(event, $img, image) { }

4、onModalImageUpdate {function}:模态窗口中的图片被更新时的回调函数。
onModalImageUpdate: function($img, image) { }

方法

1、modal.open:打开模态窗口(第二个参数是图片的索引,为可选参数)。
$('#imgs').imagesGrid('modal.open', 0)

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

3、destroy:销毁网格图片画廊实例。
$('#imgs').imagesGrid('destroy')

images-grid.js网格图片画廊插件的github地址为:https://github.com/taras-d/images-grid
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

售价:免费  [充值金币]  [免费赚金币]  [关于会员等级] 
下载权限: 无下载限制  [购买VIP]   [免费升VIP]

说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵犯您的版权,请及时联系我们,我们将尽快处理。

您需要登录后才可以回帖 登录 | 注册