转载

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

原文 http://www.html5cn.org/article-9489-1.html

正文到此结束

所属分类：编程技术

本文标签： js API DOM http https CSS Document src git UI HTML example ip jquery CTO 参数 tab 配置响应式插件 java 安装时间 value 标题 HTML5 实例下载 GitHub Select ACE
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Chocolat-jQuery响应式LightBox插件

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流