## 简介

Boxer 是一款基于 jQuery 的 Lightbox 效果插件，可用于显示图片、视频、iframe和其他内容，和其他Lightbox 效果插件一样，Boxer 在显示组图的时候，有左右箭头控制。Boxer 还能自动检测设备是否为移动设备，针对移动设备显示更适合的样式和更友好的触摸控制。

萨龙网络所有原创主题的Lightbox 效果都是使用Boxer来实现，使用方便，功能够用。

## 兼容性

浏览器兼容：simpleGal 兼容所有浏览器，包括 IE6。

jQuery 版本兼容：simpleGal 兼容 1.7 以上版本。

## 使用方法

以下介绍最基本的用法，更多用法请查看参数或演示。

### 1、引入文件

1. <link rel=“stylesheet” href=“css/jquery.fs.boxer.css”>
2. <script src=“js/jquery.min.js”></script>
3. <script src=“js/jquery.fs.boxer.js”></script>

### 2、HTML

1. <a title=“标题” href=“https://api.salongweb.com/images/a.jpg” class=“boxer” rel=“gallery”>
2. <img src=“https://api.salongweb.com/images/a.jpg” alt=“”>
3. </a>

标签 a 的属性 title 用于显示图片的标题。

### 3、JavaScript

1. // 暗窗弹出
2. $(function() {
3. $(‘.boxer’).boxer({
4. requestKey: ‘abc123’,
5. labels: {
6. close: “Close”,
7. count: “/”,
8. next: “Next”,
9. previous: “Prev”
10. }
11. });
12. });

### 3、PHP

插件使用到WP主题时，我们不可能每张图片的a标签上都添加boxer属性，所以我们通过PHP代码为文章中所有图片的a标签自动添加。

1. //为弹窗自动添加标签属性
2. add\_filter(‘the\_content’, ‘boxer\_replace’);
3. function boxer\_replace ($content){
4. global $post;
5. $pattern = “/<a(.\*?)href=(‘|\\”)(\[^>\]\*).(bmp|gif|jpeg|jpg|png)(‘|\\”)(.\*?)>(.\*?)<\\/a>/i”;
6. $replacement = ‘<a$1href=$2$3.$4$5 class=“boxer” rel=“gallery”$6>$7</a>’;
7. $content = preg\_replace($pattern, $replacement, $content);
8. return $content;
9. }

## 参数

参数类型默认值说明callbackfunction空打开后的回调函数customClassstring”增加自定义 classdurationint250动画持续时间fixedbooleanfalse是否固定在浏览器中央（不显示关滚动条）formatterfunction空标题格式函数heightint100加载时的初始高度labels.closestring‘Close’关闭按钮的文字labels.countstring‘of’组图的文字labels.nextstring‘Next’下一个按钮的文字labels.previousstring‘Previous’上一个按钮的文字marginint50与浏览器视口的边距minHeightint100最小高度minWidthint100最小宽度mobilebooleanfalse是否强制使用移动模式显示opacitynumber0.75遮罩不透明度retinabooleanfalse是否兼容 retina 高清显示requestKeystring‘boxer’GET variable for ajax / iframe requeststopint距离顶部位置videoRadionumber0.5625视频的高度videoWidthint600视频的宽度widthint100加载时的初始宽度部分内容来源：http://www.dowebok.com/82.html