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