大理高端网站建设|网站托管|极速建站|WordPress主题设计开发

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

2016-09-15 918次

简介

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. }

参数

参数 类型 默认值 说明
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