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