Facebook图片画廊效果插件images-grid

 查看演示  website  立即下载

使用方法

在页面中引入images-grid.css，jquery和images-grid.js文件。

<link rel="stylesheet" href="src/images-grid.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.ripple.js" type="text/javascript"></script>

HTML结构

使用一个<div>元素来作为图片画廊的容器。

<div id="gallery"></div>

初始化插件

在页面DOM元素加载完毕之后，可以通过imagesGrid()方法来初始化该网格图片画廊插件，并动态插入图片。

$('#gallery').imagesGrid({
  images: [
    'photos/1.jpg',
    'photos/2.jpg',
    'photos/3.jpg',
    'photos/4.jpg',
    'photos/5.jpg',
    'photos/6.jpg'
  ]
});

配置参数

• images-grid网格图片插件的可用配置参数有：

• images：类型：数组。图片的URL地址。

• aling：类型：布尔值。是否对齐不同尺寸的图片。

• getViewAllText：类型：函数。在图片大于5张时显示的文本。

PREVIOUS:
NEXT:
jQuery可视化HTML编辑器插件xhedit
jQuery表格排序筛选插件