专注 WordPress 高端企业主题的的设计与开发!

jQuery完美多平台Lightbox弹窗效果插件Boxer

2016 年 9 月 15 日 2.06K次

简介

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://salongweb.com/images/a.jpg" class="boxer" rel="gallery">
  2.     <img src="https://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增加自定义 class
durationint250动画持续时间
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 requests
topint距离顶部位置
videoRadionumber0.5625视频的高度
videoWidthint600视频的宽度
widthint100加载时的初始宽度

部分内容来源:http://www.dowebok.com/82.html