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

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

https://gongshou.xyz/plugins/wc_editor/static/ueditor/dialogs/attachment/fileTypeImages/icon_rar.gif FancyBox.zip

一般情况下第一个文件 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', '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;
}


已邀请:

要回复问题请先登录注册