Typecho 使用 fancybox 踩过的坑

2020-05-08 17:33:00
 折腾博客

为了满足点击图片直接放大得到灯箱效果,同时也看了很多人的站用了这个方案,微博手机端网页版貌似也在用这个玩意。想给自己站也搞一个2333,于是就开始寻找项目官网。

坑一

百度搜完官网之后,点进去一看,发现看到的 fancybox 和官网上的不一样!然后我才明白我要找的东西应该是 fancybox3 ...
官网:https://fancyapps.com/fancybox/3/
文档:http://fancyapps.com/fancybox/3/docs/
jscss的引入部分就此省略

继续

要用这个 jq 插件的话,需要把文章里的图片使用<a>标签来进行包裹,具体的方式是这样婶的:

<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
    <img src="thumbnail_1.jpg" alt="" />
</a>

<a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
    <img src="thumbnail_2.jpg" alt="" />
</a>

于是我想起来我现在的模板主题里有这么一个 function 可以用,这个是原来用来把<a>标签给处理成target="_blank"用的,顺便利用一下它(调用方式是在原post.phppage.php里输出文章内容的位置<?php $this->content(); ?>换成<?php parseContent($this); ?>即可)

function parseContent($obj){
    $obj->content = preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" target=\"_blank\">", $obj->content);
    echo trim($obj->content);
}

做了一下加法,让他除了能实现上述功能之外,还能实现图片下方出现<figcaption>描述的功能,一举多得

function parseContent($obj){
    $obj->content = preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" target=\"_blank\">", $obj->content);
    $pattern = '/<\s*img[\s\S]+?(?:src=[\'"]([\S\s]*?)[\'"]\s*|alt=[\'"]([\S\s]*?)[\'"]\s*|[a-z]+=[\'"][\S\s]*?[\'"]\s*)+[\s\S]*?>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" no-pjax data-type="image" data-caption="$2" ><img src="$1" alt="$2" title="点击放大图片"></a><figcaption class="article-holder">$2</figcaption>';
    $obj->content = preg_replace($pattern, $replacement, $obj->content);
    echo trim($obj->content);
}

这样的话,文章上的适配就完成了~

坑二

如果把parseContent()函数的功能套在文章列表页的话,那么more分隔符就不好使了...淦
然后我就想到了用jq实现了替换标签的这么一个功能

$(document).ready(function(){
    $(".post-content .jq_need_box img").each(function(){
        var _a = $("<a></a>").attr({"href":this.src,"data-fancybox":"gallery","no-pjax":"","data-type":"image","data-caption":this.alt});
        $(this).wrap(_a);
    });
});

为了让这个能够不在现有的文章页里重复使用这个功能,我只把这段 js 放在了index.php里和archive.php里面(因为文章页的这个功能已经实现过了,无需再次替换)。
令各位在用这个 jq 的方法的时候,切记要重新指定 jq 选择器,也就是我上面的$(".post-content .jq_need_box img")的那段,需要按照自己站点主题的情况自行指定<img>标签!

至此,踩坑结束,撒花~

Ajax/Pjax

无需做另外的操作,至少我这边是不需要任何重载函数,仍旧可以跨页后正常使用

2020.5.9 更新

修复 <figure>标签使用不规范的问题

function parseContent($obj){
    $obj->content = preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" target=\"_blank\">", $obj->content);
    $pattern = '/<\s*img[\s\S]+?(?:src=[\'"]([\S\s]*?)[\'"]\s*|alt=[\'"]([\S\s]*?)[\'"]\s*|[a-z]+=[\'"][\S\s]*?[\'"]\s*)+[\s\S]*?>/i';
    $replacement = '<figure><a href="$1" data-fancybox="gallery" no-pjax data-type="image" data-caption="$2" ><img src="$1" alt="$2" title="点击放大图片"></a><figcaption class="article-holder">$2</figcaption></figure>';
    $obj->content = preg_replace($pattern, $replacement, $obj->content);
    echo trim($obj->content);
}