jQuery Lightbox效果插件Boxer
简介
Boxer 是一款基于 jQuery 的 Lightbox 效果插件,可用于显示图片、视频、iframe和其他内容,和其他Lightbox 效果插件一样,Boxer 在显示组图的时候,有左右箭头控制。Boxer 还能自动检测设备是否为移动设备,针对移动设备显示更适合的样式和更友好的触摸控制。
兼容性
浏览器兼容:simpleGal 兼容所有浏览器,包括 IE6。
jQuery 版本兼容:simpleGal 兼容 1.7 以上版本。
使用方法
以下介绍最基本的用法,更多用法请查看参数或演示。
1、引入文件
<link rel="stylesheet" href="css/jquery.fs.boxer.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.fs.boxer.js"></script>
2、HTML
<a title="标题闪电闪电" href="images/1b.jpg"> <img src="//www.dowebok.com/images/1s.jpg" alt=""> </a>
标签 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 | 加载时的初始宽度 |