所属分类:网页特效-图片特效
使用方法:
引入CSS样式、jQuery库文件、插件JS文件
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="src/images-grid.js"></script>
<link rel="stylesheet" href="src/images-grid.css">
HTML结构
使用一个<div>元素来作为图片画廊的容器。
<div id="gallery1"></div>
插件初始化、参数配置
在页面DOM元素加载完毕之后,可以通过imagesGrid()方法来初始化该网格图片画廊插件,并动态插入图片。
$('#gallery1').imagesGrid({
images: [
'imgs/1.jpg',
{ src: 'imgs/2.jpg', alt: 'Second image', title: 'Second image' },
'imgs/3.jpg',
{ src: 'imgs/4.jpg', caption: 'Beautiful forest' },
'imgs/5.jpg',
'imgs/6.jpg'
]
});
配置参数
images-grid网格图片插件的可用配置参数有:
images:类型:数组。图片的URL地址。
aling:类型:布尔值。是否对齐不同尺寸的图片。
getViewAllText:类型:函数。在图片大于5张时显示的文本。