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方法有：
open：参数可选。参数：i。在lightbox中打开index为i的图片。默认打开第一张图片（i=0）。返回$.Deferred对象。close：关闭lightbox。返回$.Deferred对象。prev：跳转到前一张图片。返回$.Deferred对象。next：跳转到下一张图片。返回$.Deferred对象。goto(i)：跳转到第i张图片。返回$.Deferred对象。place：使图片位于父元素居中。返回$.Deferred对象。destroy：销毁当前插件实例。set(property, value)：设置class。get(property, value)：获取class。getElem(name)：返回构成lightbox的某个jquery对象。current：返回当前图片的index。
CSS类
.chocolat-open：lightbox打开时容器的class。.chocolat-in-container：当不是以window方式打开时容器的class类。.chocolat-cover：当imageSize设置为'cover'时容器的class类。.chocolat-zoomable：当lightbox可以进行缩放时容器的class类。.chocolat-zoomed：当lightbox可以正在进行缩放时容器的class类。
Chocolat插件的github地址为：https://github.com/nicolas-t/Chocolat
