引用 FancyBox插件为Typecho文章图片添加灯箱效果

此教程适用于没灯箱效果的主题

FancyBox是一款优秀的弹出框Jquery插件,FancyBox提供了一种简洁优雅的方式去为图片、网页和多媒体添加灯箱功能。

1、引用 FancyBox插件
把下面内容添加到 header.php 中 前面

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <!--如果主题已经引用了jQuery库,可以忽略这条-->
<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.css">
<script src="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.js"></script>

2、修改post.php
打开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;
?>

3、初始化FancyBox
把下面js添加到 footer.php 文件的前

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

「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」

薇拉航线🌺

(๑>ڡ<)☆谢谢老板们的投食~

使用微信扫描二维码完成支付


文章二维码

手机阅读

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!


关注微信公众号『丰烨地毯』

第一时间了解最新地毯信息
关注官微不迷路~

添加新评论

  关于博主

一个90后的国际货运专业毕业的学生 搭建网站纯粹是个人兴趣使然 偶尔会写一丢丢PHP和JS的前端代码 目前正在纺织公司学习外贸方面的新人 欢迎各位朋友的交流学习!

  网易评论

思考中……

  近期评论

快乐地过是一天,不快乐地过也是一天,我为什么不快快乐乐地过每一天呢?

岂能尽随人愿,但求无愧我心。

在你内心深处,还有无穷的潜力,有一天当你回首看时,你就会知道这绝对是真的。

活在当下,别在怀念过去或者憧憬未来中浪费掉你现在的生活。

挫折时,要像大树一样,被砍了,还能再长;也要像杂草一样,虽让人践踏,但还能勇敢地活下去。

当你觉得生活没意思,做什么都提不起兴趣时,说明你已经许久没有做出过改变了。长时间待在舒适区,人难免会慢慢丧失斗志,动起来,做出改变,出去看看世界或者学一项新技能,让自己始终在进步。你要相信,在这个世界上,一定有着另外一个你自己,在做着你不敢做的事,过着你想过的生活。