簡要教程

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之家

總結

以上是生活随笔為你收集整理的html5响应式的插件,Chocolat-jQuery响应式LightBox插件 -HTML5功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。