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之家
html5响应式的插件,Chocolat-jQuery响应式LightBox插件 -HTML5功能相关推荐
- android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件
PgwSlideshow是一款非常实用的响应式.支持触摸屏的jQuery轮播图插件.该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度.你也可以自定义轮播图的高度,图片宽度会根据高度等 ...
- html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件.通过该插件可以为Bootstrap的原生Panel面板增加编辑标题,最大化,最小化,面板拖动关闭面板等功 ...
- html 拖放插件,DAD – jQuery拖拽/拖放插件
DAD – jQuery拖拽/拖放插件 分类:代码 日期:2016-08-02 点击(37,745) 下载(1) 来源:未知 收藏 简介 DAD 是一款基于 jQuery 的拖拽/拖放插件,它支持常见 ...
- Lightbox弹出层插件:jQuery弹出层插件用法
插件描述:这款lightbox,可应用于图片.swf文件.html文件等等. Lightbox弹出层插件 说明文档 : 1.引入资源,(JQ1.3+)和JS文件: <script type=& ...
- jquery 日期显示插件_8+ jQuery 360度图像显示插件
jquery 日期显示插件 就像"全景"一样,这些jQuery 360度图像显示插件惊人地可以从各个角度显示对象/风景的360度视图 . (嘿–从各个角度看东西肯定会更有趣!). ...
- html的3d旋转木马插件,jRCarousel | jQuery响应式3D旋转木马插件
jR3DCarousel是一款效果非常炫酷的3D旋转木马jQuery插件.该旋转木马插件可以通过参数设置来修改旋转木马的类型,可以设置显示模式和easing动画缓动模式等.它的特点还有: 多种动画效果 ...
- jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件
完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...
- jQuery 表单验证插件,jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- 推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
最新文章
- 欧盟「人脑计划」​最新进展:新算法模拟生物进化,为大脑如何工作提供新见解...
- 关于第5周反向传播算法的一些争论与思考
- recycleview 嵌套高度问题_RecyclerView嵌套子RecyclerView无法正常显
- flink sql 部署_在FlinkSQL中使用SQL client时,如何使用 query配置?
- 经验 | 深度学习如何挑选GPU?
- 学用软件:laTex软件初体验
- oracle10.2.0.4 dbca,在rhel5上oracle 10.2.0.4 上dbca silent删除数据库
- 【渝粤教育】国家开放大学2018年秋季 1374T班级管理 参考试题
- android 时间差格式化,计算2天之间的时间差android
- 数据结构:实验二 队列的基本功能实现
- 关于时间、日期的一些应用
- Metro程序部署到Surface调试
- rk3399pro Andoid9.0 修改系统默认音量设置
- 饥荒联机 显示服务器小麻烦,饥荒联机版新手从入门到精通教程
- 抱抱脸(hugging face)教程-中文翻译-使用 Tokenizers 的 tokenizers
- 一张图看清楚成功人士与失败人士的差别,成功人士的10个标志
- python从入门到入土表情包-我用Python一键保存了半佛老师所有的骚气表情包
- mybatis配置文件 .dtd头部约束 出错报红 【亲测实用,可供参考】
- Matlab中值滤波
- Eclipse配置Python的IDE
热门文章
- 瑞昱Realtek交换机芯片概要
- windows server 部署java Web项目
- 软件测试验收报告知识点
- 软件工程基础-个人项目-数独的生成与求解
- Arch系统软件列表
- NetworkManager nmcli connection modify 笔记221025
- 通讯录管理系统JAVA版本
- Dubbo使用_尚硅谷视频学习笔记
- 申报表计算机代码是什么,金税盘的维护费在申报表上面有一个要填写减免性质代码怎么填啊 ?那个代码是什么呢?...
- 【OpenCv3】 VS C++ (五):SLIC超像素分割算法