jquery-elastic-grid是一款仿造Google Image Search的轻量级、使用简单的弹性响应式网格布局图片画廊jQuery插件。该网格图片画廊插件支持PNG图片,JPG图片和GIF图片。它使用缩略图来制作网格布局,在用户点击缩略图时将打开大图并带一些相关内容。
该网格布局图片画廊同时还可以进行图片分类过滤,在过滤时可以设置多种CSS3过渡动画效果。
使用方法
HTML结构
该弹性网格图片布局的HTML结构使用一个空的<div>
即可。
使用该插件前要先引入jQuery、elastic_grid.min.css和elastic_grid.min.js文件。
<link rel="stylesheet" type="text/css" href="css/elastic_grid.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/modernizr.custom.js"></script> <script src="js/classie.js"></script> <script type="text/javascript" src="js/elastic_grid.min.js"></script>
<div id="elastic_grid_demo"></div>
初始化插件
$(function(){ $("#elastic_grid_demo").elastic_grid({ 'showAllText' : 'All', 'filterEffect': 'popup', // moveup, scaleup, fallperspective, fly, flip, helix , popup 'hoverDirection': true, 'hoverDelay': 0, 'hoverInverse': false, 'expandingSpeed': 500, 'expandingHeight': 500, 'items' : [ { 'title' : 'Azuki bean', 'description' : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.', 'thumbnail' : ['images/small/1.jpg', 'images/small/2.jpg', 'images/small/3.jpg', 'images/small/10.jpg', 'images/small/11.jpg'], 'large' : ['images/large/1.jpg', 'images/large/2.jpg', 'images/large/3.jpg', 'images/large/10.jpg', 'images/large/11.jpg'], 'button_list' : [ { 'title':'Demo', 'url' : 'http://www.htmleaf.com/', 'new_window' : true }, { 'title':'Download', 'url':'http://www.htmleaf.com/', 'new_window' : false} ], 'tags' : ['Self Portrait'] } ] }); });
每一个items
数组中的对象是一张图片。tags
用于指定图片分类。large
和thumbnail
分别是大图和缩略图。你可以设置多个button_list
和tags
项。
配置参数
参数 | 描述 |
filterEffect | 图片分类过滤时的动画过渡效果,可以设置为: moveup, scaleup, fallperspective, fly, flip, helix , popup |
hoverDirection | 缩略图上的遮罩进入的方向和鼠标进入的方向相同。设置为false 则反向。 |
hoverDelay | 鼠标悬停方向 |
hoverInverse | 反转鼠标悬停方向 |
expandingSpeed | 点击缩略图后展开大图的速度 |
expandingHeight | 大图的高度 |
items | 该参数参考上面的初始化代码 |
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!