给博客添加图片灯箱FancyBox+Pjax

参考：https://www.seogo.me/typecho/598.html

一、先使用CDN引入CSS和JS

FancyBox需要Jquery支持：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" type="text/javascript"></script>

二、修改模板的post.php

将模板中的<?php $this->content(); ?>修改为：

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

三、初始化FancyBox

把下面js添加到 footer.php 文件的前

<script type="text/javascript">
    $(document).ready(function () {
        $( ".fancybox").fancybox();
    });
</script>

四、Pjax重载 fancybox

$(document).on('pjax:complete', function() {
        $("#loading").css('display','none'); 
        jQuery('[data-fancybox="gallery"]').fancybox();
    });