神刀安全网

Chocolat-jQuery响应式LightBox插件

简要教程

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

Chocolat-jQuery响应式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之家

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Chocolat-jQuery响应式LightBox插件

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮