免插件实现 WordPress LightBox 灯箱效果 [ Fancy Box ]

老俍 • 2019-04-11 • 研究学习 • 阅读 7216

因为最近 WordPress 插件闹的很多站点被黑《WordPress 近20万站点被黑插件漏洞再被利用》，老俍痛定思痛要把插件数量尽可能减少，才写了《看来是该减少点 WordPress 插件了》的文章。

今天介绍的免插件实现 WordPress LightBox 灯箱效果文章，就是要替换 WP Lightbox 2 插件的，不但免去了插件而且效果更好。有图有真相，先看效果图，点击图片可以显示效果。

FancyBox 图片灯箱效果不仅可以点击图片放大，而且还支持幻灯片播放、全屏查看、缩略图列表以及分享照片的功能。是不是比 Lightbox 还过瘾！最厉害连移动端的适配都做了，Lightbox 在移动端是不能自适应的。

下面来具体介绍这么牛 X 的 FancyBox 如何部署安装

第一：需要先部署三个文件，两个 JS 一个 CSS 。为了避免拷贝错误，可以直接从此链接下载所需文件，包括代码部分。懒人通道

一般情况下第一个文件 jquery-3.2.1.min.js 主题都会引用所以就不需要了。下面两个是必须要用的，本文中是我博客的路径，请根据你自己的路径设置正确的链接。

<script src="http://oneinf.com/wp-content/themes/period/js/jquery-3.2.1.min.js"></script>

<script src="http://oneinf.com/wp-content/themes/period/js/jquery.fancybox.min.js"></script>

<link rel="stylesheet" href="http://oneinf.com/wp-content/themes/period/jquery.fancybox.min.css" />

第二：将部署的文件引入你 WordPress 主题当中 header.php 文件的 </head> 之前。

第三：将下面的代码放入你 WordPress 主题下的 functions.php 文件中即可实现效果。

/**FancyBox图片灯箱**/
add_filter('the_content', 'fancybox1');
add_filter('the_content', 'fancybox2');
function fancybox1($content){ 
    global $post;
    $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
function fancybox2($content){ 
    global $post;
    $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

重要提示！博友大致在看完此篇文章后，抽根烟不到的时间，将上面这段嵌入 functions.php 文件中的代码缩短了一倍，亲测非常 OK 。猛然间想起一句老话“学好数理化，走遍天下都不怕！”再次感谢。精简后的代码如下：

/**FancyBox图片灯箱，大致修改版**/
add_filter('the_content', 'fancybox');
function fancybox($content){ 
    $pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
    $replacement = array('<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

如果还有不清楚的可以在下方留言，看到会及时回答。

VIA：nice.im

资源下载：

文件名称：FancyBox 灯箱代码

文件大小：104 KB适用版本：

更新日期：2019-04-11资源链接：

点击下载

本站 [ 俍注 ] 内除注明转载文章，其他均为老俍独立创作，采用「CC BY-NC-ND 4.0」创作共享协议。
原创不易，希望保留原文链接转载，原文链接：https://oneinf.com/tech/3272.html

发表回复

评论列表（15条）

奶爸de笔记 2019-06-05

你看，我把这个要是实现了，你的博客就会出现在我文章链接里了，这样就互相交叉外链了。多好。

回复
- 老俍 2019-06-05
  
  @奶爸de笔记：你的文章链接一定会出现在我的博客里，我还是很尊重版权的，哈哈哈
  
  回复
- 奶爸de笔记 2019-06-05
  
  @老俍：我主题没引入jquery-3.3.1.min.js，还要手动加一个js，我再考虑要不要用。
  
  回复
子午 2019-04-20

解压密码是啥呀？

回复
- 老俍 2019-04-20
  
  @子午：oneinf.com
  
  回复
老派 2019-04-15

lazyload也用类似的方法，最近刚上。不过看了看插件还是插件写的全面，使用方便。最终还是上插件了，懒人惭愧。。。

回复
大致 2019-04-12

刚才那个不对,别照着弄.第二个参里单引号代码被吞了.

回复
- 老俍 2019-04-12
  
  @大致：要不好人做到底，用文本发我邮件吧！960543@qq.com
  
  回复
- 老俍 2019-04-12
  
  @大致：非常完美的缩短了代码的行数，已经更新文章。
  
  回复
老俍 2019-04-11

这方面你比较强，要不你给整整我放上来。

回复
大致 2019-04-11

两个函数完全可以合二为一。
preg_replace的第一个参和第二个参都可以是数组。

回复
- 从良未遂 2019-04-12
  
  @大致：这方面你比较强，要不你给整整我放上来。+1
  
  回复
- 老俍 2019-04-12
  
  @从良未遂：多发发他就整了
  
  回复
- 大致 2019-04-12
  
  @从良未遂：你们呐！我觉得我已经说得够明白的了，就是把原来两个函数里的参合并，变成数组参往下传而已……
  add_filter(‘the_content’, ‘fancybox’);
  function fancybox($content){
  $pattern = array(“/]*).(bmp|gif|jpeg|jpg|png|swf)(‘|\”)(.*?)>/i”,”/]*).(bmp|gif|jpeg|jpg|png|swf)(‘|\”)(.*?)>(.*?)/i”);
  $replacement = array(‘‘,’$7‘);
  $content = preg_replace($pattern, $replacement, $content);
  return $content;
  }
  
  回复
- 老俍 2019-04-12
  
  @大致：哈哈哈，我们要的就是结果，谢谢大神！
  
  回复