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

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

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

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

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

具体步骤:

在主题的 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.phppost.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 标签,检查具有哪些属性?如果只有 srcalt,那么使用上面的 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/

仅有 1 条评论
  1. 测试一下评论

    😄️

    - markdown1
    - markdown2
    - markdown3

添加新评论