Chocolat-jQuery响应式LightBox插件
简要教程
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
来源：jQuery之家
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
