图片暗箱各式各样，其实我更想要的是更加简洁的，就纯粹的一个弹出box，最重要的是美观，Fancybox效果也是相当不错，功能全面，这篇文章是搬运远航博客《Typecho添加图片暗箱效果》的，请大家对号入座。

1、引用 FancyBox插件

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

2、给文章图片添加标签

<?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;
?>

用上面的代码替换post.php里的

<?php $this->content(); ?>

3、在头部或者尾部初始化

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

到此完成，我的之前文内加了懒加载，现在还在看怎么把懒加载融合到Fancybox里面去（亲忽略下面一段代码）。

<?php
    $content = preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"../../usr/themes/blue-white/img/loading.gif\"\$3>\n<noscript>\$0</noscript>",$this->content); echo $content ?>

Tags：none