简要教程
Chocolat是一款实用的响应式jQuery LightBox插件。该LightBox插件可以设置两种图像的显示方式:contain和cover。lightbox中的图像可以放大和平移,还可以全屏显示。
查看演示 下载插件
安装
可以通过bower方法来安装该LightBox插件。
$ bower install chocolat
使用方法
使用该lightbox插件需要在页面中引入chocolat.css、jquery和jquery.chocolat.js文件。
<link rel="stylesheet" href="css/chocolat.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.chocolat.js"></script>
HTML结构
该Lightbox的基本HTML结构如下:
<div id="example1" data-chocolat-title="Set title"> <a class="chocolat-image" href="img/a.jpg" title="image caption a"> A <!-- you can display a thumbnail here : <img src="thumb/a.jpg" /> --> </a> <a class="chocolat-image" href="img/b.jpg" title="image caption b"> B <!-- you can display a thumbnail here : <img src="thumb/b.jpg" /> --> </a> </div>
初始化插件
在页面DOM元素加载完毕之后,可以通过Chocolat()方法来初始化该lightbox插件。
$(document).ready(function(){ $('#example1').Chocolat(); });
配置参数
参数 | 默认值 | 描述 |
container | window | 设置默认是在整个页面还是一个容器中打开lightbox。可以是window, 选择器, jQuery元素或一个节点。 |
imageSelector | '.chocolat-image' | 在父元素中图片的选择器。 |
linkImages | true | 设置是否可以切换图片。 |
setTitle | '' | 设置标题。也可以通过data-chocolat-title属性来设置。 |
className | '' | 为lightbox父元素设置一个CSS类。 |
imageSize | 'default' | 可以是: 'default' , 'contain' , 'native' , 'cover' 。 'default' :表示如果图片尺寸大于window则调整图片尺寸适合窗口尺寸,小则不改变。 'contain' :表示如果图片尺寸大于window则调整图片尺寸适合窗口尺寸,如果图片尺寸小则改变图片比例来填充窗口。 'native' :图片从不改变其尺寸。 'cover' :图片覆盖窗口,不留任何白边。 |
fullScreen | false | 是否允许进入全屏模式。 |
loop | false | 是否循环播放。 |
duration | 300 | 动画持续时间。 |
firstImage | 0 | 第一张图片。 |
lastImage | 0 | 最后一张图片。 |
separator2 | '/' | 图片数量标识之间的分隔符号。 |
images | [] | 图片数组。 |
enableZoom | true | 是否允许缩放。 |
setIndex | 0 | 设置index |
API方法
像下面这样调用chocolat插件:
$(document).ready(function(){ var instance = $('#example1').Chocolat().data('chocolat'); });
然后通过链式结构调用API:
instance.api().open();
可用的API方法有:
CSS类
Chocolat插件的github地址为: https://github.com/nicolas-t/Chocolat
来源:jQuery之家