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主题，其他主题未测试。

8月24日更新：

经测试，添加如上代码后，后台编辑器会出错。因为我使用的简数发布，一直没有发现该问题。而且该插件不支持带有参数的外链图片，如添加七牛云的图片样式后不支持灯箱查看。所以我又找了另一个插件来代替：Meow Lightbox，该插件不仅支持外链图片，还支持外链图片自定义样式，只是图片放大功能不太好使，大尺寸图片不能放大到原图。

效果预览点这里。

Not Comment Found