web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
幻灯片和轮播图
Chocolat-jQuery响应式LightBox插件
分类:
幻灯片和轮播图
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### 使用方法 使用方法 使用该lightbox插件需要在页面中引入chocolat.css、jquery和jquery.chocolat.js文件。 ```html
``` ##### HTML结构 该Lightbox的基本HTML结构如下: ```html
A
B
``` ##### 初始化插件 在页面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类。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告