WordPress LightBox 灯箱效果 [ Fancy Box ]代码版免插件

前端 153
3个月前

首先引入 JS 和 css(文末下载地址),请根据你的文件目录自行修改


<script src=".../js/jquery-3.2.1.min.js"></script>
<script src=".../js/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href=".../jquery.fancybox.min.css" />

 
第二:将部署的文件引入你 WordPress 主题当中 header.php 文件的 之前。
第三:将下面的代码放入你 WordPress 主题下的 functions.php 文件中即可实现效果。
 


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

 
点击下载

相关文章

WordPress 获取文章内所有图片

将下列代码添加至functions.php function hui_get_thumbnail( …

124
3个月前
WordPress 不同分类使用不同的文章模板

方法一:根据模板文件名进行判断 1.将下面的代码添加到当前主题的 functions.php 文件:…

144
3个月前
WordPress 纯代码实现外链跳转

第一步、新建go文件夹和index.php 新建一个go文件夹,然后在里面加一个index.php,…

174
3个月前

共有0条评论

评论本文