html5响应式的插件,Chocolat-jQuery响应式LightBox插件 -HTML5功能

简要教程

Chocolat是一款实用的响应式jQuery LightBox插件。该LightBox插件可以设置两种图像的显示方式：contain和cover。lightbox中的图像可以放大和平移，还可以全屏显示。

安装

可以通过bower方法来安装该LightBox插件。

$ bower install chocolat

使用方法

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

HTML结构

该Lightbox的基本HTML结构如下：

A

B

初始化插件

在页面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类。

来源：jQuery之家