Press "Enter" to skip to content

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

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

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

FancyBox.png

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



本博客 [ 俍注 ] 内带有 原创 标签文章,均为老俍独立创作。
原创不易,转载请注明来源并保留原文链接:转载自 俍注 | ONEinf.com

共 15 条评论,我也要写评论

  1. 奶爸de笔记
    奶爸de笔记 2019-06-05

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

    • 老俍
      老俍 2019-06-05

      你的文章链接一定会出现在我的博客里,我还是很尊重版权的,哈哈哈

      • 奶爸de笔记
        奶爸de笔记 2019-06-05

        我主题没引入jquery-3.3.1.min.js,还要手动加一个js,我再考虑要不要用。

  2. 老派
    老派 2019-04-15

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

  3. 大致
    大致 2019-04-12

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

    • 老俍
      老俍 2019-04-12

      要不好人做到底,用文本发我邮件吧!960543@qq.com

    • 老俍
      老俍 2019-04-12

      非常完美的缩短了代码的行数,已经更新文章。

  4. 老俍
    老俍 2019-04-11

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

  5. 大致
    大致 2019-04-11

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

    • 从良未遂
      从良未遂 2019-04-12

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

      • 大致
        大致 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

          哈哈哈,我们要的就是结果,谢谢大神!

发表评论

电子邮件地址不会被公开。 必填项已用*标注