我有这个需求之后便搜了一下，看到已经有插件实现了 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 的图片灯箱效果。
试用一下？
引用
https://www.idzd.top/archives/762/
阅读全文 »
