Typecho快速实现灯箱效果 时间：2020年6月9日 分类：教程分享 评论：0 条 阅读：3616 次 jquery fancybox 灯箱 # **引入jQuery和fancybox** PS：如果已经引入jQuery就不需要了 **加入header.php 前** ```php <link rel="stylesheet" href="https://libs.cdnjs.net/fancybox/3.5.7/jquery.fancybox.css"> ``` **加入footer.php 前** ``` <script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js"></script> <script src="https://libs.cdnjs.net/fancybox/3.5.7/jquery.fancybox.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $( ".fancybox").fancybox(); }); </script> ``` # **添加灯箱效果** **打开post.php找到** ```php <?php $this->content(); ?> ``` **改成** ```php <?php $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; $replacement = '<a href="$1" data-fancybox="gallery" /><img src="$1" alt="'.$this->title.'" title="点击放大图片" loading="lazy"></a>'; $content = preg_replace($pattern, $replacement, $this->content); echo $content; ?> ``` # **注意事项** 如果是instantclick全站无刷新，想要分离文章页的样式文件请在首页引入灯箱的css，否则会出现灯箱功能失效的情况。 本文由 血莲聆空 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为：2020年6月9日 06:39:46
