jQuery Lightbox效果插件Boxer
简介
Boxer 是一款基于 jQuery 的 Lightbox 效果插件,可用于显示图片、视频、iframe和其他内容,和其他Lightbox 效果插件一样,Boxer 在显示组图的时候,有左右箭头控制。Boxer 还能自动检测设备是否为移动设备,针对移动设备显示更适合的样式和更友好的触摸控制。
在线演示及下载
兼容性
浏览器兼容:simpleGal 兼容所有浏览器,包括 IE6。
jQuery 版本兼容:simpleGal 兼容 1.7 以上版本。
使用方法
以下介绍最基本的用法,更多用法请查看参数或演示。
1、引入文件
2、HTML
标签 a 的属性 title 用于显示图片的标题。
3、JavaScript
$('.boxer').boxer();
参数
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
callback | function | 空 | 打开后的回调函数 |
customClass | string | ” | 增加自定义 class |
duration | int | 250 | 动画持续时间 |
fixed | boolean | false | 是否固定在浏览器中央(不显示关滚动条) |
formatter | function | 空 | 标题格式函数 |
height | int | 100 | 加载时的初始高度 |
labels.close | string | ‘Close’ | 关闭按钮的文字 |
labels.count | string | ‘of’ | 组图的文字 |
labels.next | string | ‘Next’ | 下一个按钮的文字 |
labels.previous | string | ‘Previous’ | 上一个按钮的文字 |
margin | int | 50 | 与浏览器视口的边距 |
minHeight | int | 100 | 最小高度 |
minWidth | int | 100 | 最小宽度 |
mobile | boolean | false | 是否强制使用移动模式显示 |
opacity | number | 0.75 | 遮罩不透明度 |
retina | boolean | false | 是否兼容 retina 高清显示 |
requestKey | string | ‘boxer’ | GET variable for ajax / iframe requests |
top | int | 距离顶部位置 | |
videoRadio | number | 0.5625 | 视频的高度 |
videoWidth | int | 600 | 视频的宽度 |
width | int | 100 | 加载时的初始宽度 |
相关推荐
-
jQuery侧边栏插件-Simpler Sidebar 插件应用
2017-12-25
-
lightslider-支持移动触摸的轻量级jQuery幻灯片插件 插件应用
2017-7-4
-
BetterScroll:在移动端滚动场景的应用 插件应用
2017-12-11
-
jQuery响应式图片画廊插件S Gallery 插件应用
2017-12-12
-
tween.js 中文使用指南 插件应用
2018-1-6
-
Slideout.js菜单导航插件 插件应用
2017-12-11
-
markline.js——轻量级canvas绘制标记线的库 插件应用
2018-1-9
-
Intro.js 分步向导插件使用方法 插件应用
2017-6-3
-
FullPage.js全屏插件文档及使用方法 插件应用
2017-6-27
-
企业级时间轴插件Vue-timelinepick 插件应用
2017-12-12