jQuery完美多平台Lightbox弹窗效果插件Boxer
简介
Boxer 是一款基于 jQuery 的 Lightbox 效果插件，可用于显示图片、视频、iframe和其他内容，和其他Lightbox 效果插件一样，Boxer 在显示组图的时候，有左右箭头控制。Boxer 还能自动检测设备是否为移动设备，针对移动设备显示更适合的样式和更友好的触摸控制。
萨龙网络所有原创主题的Lightbox 效果都是使用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="https://salongweb.com/images/a.jpg" class="boxer" rel="gallery">
- <img src="https://salongweb.com/images/a.jpg" alt="">
- </a>
标签 a 的属性 title 用于显示图片的标题。
3、JavaScript
- // 暗窗弹出
- $(function() {
- $('.boxer').boxer({
- requestKey: 'abc123',
- labels: {
- close: "Close",
- count: "/",
- next: "Next",
- previous: "Prev"
- }
- });
- });
3、PHP
插件使用到WP主题时，我们不可能每张图片的a标签上都添加boxer属性，所以我们通过PHP代码为文章中所有图片的a标签自动添加。
- //为弹窗自动添加标签属性
- add_filter('the_content', 'boxer_replace');
- function boxer_replace ($content){
- global $post;
- $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
- $replacement = '<a$1href=$2$3.$4$5 class="boxer" rel="gallery"$6>$7</a>';
- $content = preg_replace($pattern, $replacement, $content);
- return $content;
- }
参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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 | 加载时的初始宽度 |
部分内容来源：http://www.dowebok.com/82.html
