wordpress文章页增加图片灯箱效果(Fancybox)

发布于 / wordpress / 0 条评论

最近在鼓捣着一个图片网站,想要给文章里图片增加灯箱效果,发现大部分的灯箱插件都只支持连接到图片地址的图片。有没有方法实现不链接到图片地址就能实现灯箱效果呢?研究了一番,我终于实现了。

首先安装FancyBox for WordPress插件

启用后在主题functions.php文件中加入以下代码:


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>';
    $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';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

这样即可实现图片的灯箱效果。效果预览点这里。另外,我用的主题的b2主题,其他主题未测试。

Not Comment Found