不通过插件给 Typecho 博客添加图片灯箱功能（fancybox js 实现）

我有这个需求之后便搜了一下，看到已经有插件实现了 Swipebox 图片灯箱插件其开源在 https://github.com/wuxiaocong/Swipebox/

但是看了一下评论和 issues，担心会有一些奇奇怪怪的 bug，或者和其他已有插件冲突，便放弃了这个插件。

然后有了新的思路，FancyBox。我们可以直接使用 FancyBox 来完成我们的需求，FancyBox 是一款优秀的弹出框 Jquery 插件

允许我们用鼠标和键盘上的四个方向键切换图片
可以根据当前窗口大小自动调整弹出框的大小，当我们改变浏览器窗口大小时，将会看到弹出框自动缩放
支持缩略图列表、放大、全屏等功能
弹出框支持显示多种类型的内容：图片、html、视频…
支持触控、缩放手势操作图片

具体步骤：

在主题的 header.php 的 <head></head> 标签之间添加如下 css 引用

<!--在 header.php 里添加这个-->
<link href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">

在 footer.php 合适的位置添加如下脚本引用

<!--加载jquery依赖，一般主题都会引用 jquery.min.js 可以看情况注释这行。如果你的主题已引用此 js，请注释这行。-->
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!--fancybox的js，还是bootcdn，因为 jsdelivr 已变慢了，之前还被墙了-->
<script src="//cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>

找到主题的 page.php 和 post.php 等文件，这些文件都有一个共同特征，一般有文章正文，在正文的 div 中具有 <?php $this->content(); ?> 的 php 代码。这行代码是将正文内容塞入正文的 div 容器中渲染网页。要想实现图片灯箱功能，需要将正文中的 <img></img> 替换成一个被 a 标签包裹的 img 标签。我们使用正则表达式替换。

找到你主题下的各个文件里的 <?php $this->content(); ?> 然后替换为如下代码

<?php
    $pattern = '/\<img.*?src\=\"(.*?)\".*?alt\=\"(.*?)\".*[^>]*>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" /><img src="$1" alt="$2" title="$2"></a>';
    $content = preg_replace($pattern, $replacement, $this->content);

    //需要支持截断的添加下面两行
    $array=explode('<!--more-->', $content);
    $content=$array[0];

    echo $content;
?>

如果不生效，有可能是 regex 的 pattern 不对，浏览器打开 F12 审查元素，检查你的文章原文中的图片 img 标签，检查具有哪些属性？如果只有 src 和 alt，那么使用上面的 php 代码是可以生效的，如果还有 title 属性，就要改一下正则表达式，请使用如下代码

<?php
    $pattern = '/\<img.*?src\=\"(.*?)\".*?alt\=\"(.*?)\".*?title\=\"(.*?)\"[^>]*>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" /><img src="$1" alt="$2" title="$3"></a>';
    $content = preg_replace($pattern, $replacement, $this->content);

    //需要支持截断的添加下面两行
    $array=explode('<!--more-->', $content);
    $content=$array[0];

    echo $content;
?>

保存即可生效，打开一篇具有图片的文章就能预览 FancyBox 的图片灯箱效果。

试用一下？

typecho图片灯箱效果预览.jpg

引用

https://www.idzd.top/archives/762/