Lightbox/弹窗
Chocolat - jQuery响应式LightBox插件
PetitQ
收藏
Chocolat 是一款实用的响应式 jQuery LightBox 插件。该 LightBox 插件可以设置两种图像的显示方式：contain 和 cover。lightbox 中的图像可以放大和平移，还可以全屏显示。
使用方法：
使用该 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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
