当前位置：首页 > 网页特效 > 幻灯片和轮播图

Chocolat-jQuery响应式LightBox插件

分类：幻灯片和轮播图日期：2024-05-14 点击(0) 评论(0)

简介

##### 使用方法 使用方法
使用该lightbox插件需要在页面中引入chocolat.css、jquery和jquery.chocolat.js文件。

```html
<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结构如下：

```html
<div id="example1" data-chocolat-title="Set title">
    <a class="chocolat-image" href="img/a.jpg" title="image caption a">
        A 
    </a>
    <a class="chocolat-image" href="img/b.jpg" title="image caption b">
        B 
    </a>
</div>   
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过Chocolat()方法来初始化该lightbox插件。

```html
$(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插件：

```html
$(document).ready(function(){
    var instance = $('#example1').Chocolat().data('chocolat');
}); 
```                 
然后通过链式结构调用API：

```html
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类。

web299.com

Chocolat-jQuery响应式LightBox插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果