Typecho文章图片添加灯箱效果

16234 阅读 9 评论 130 字

FancyBox是一款优秀的弹出框Jquery插件,FancyBox提供了一种简洁优雅的方式去为图片、网页和多媒体添加灯箱功能。此教程为大家介绍 FancyBox在Typecho主题上的应用。

先来看看效果

微信截图_20190709180945.png

下面开始教程~

引用 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>

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

初始化FancyBox

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

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

完成。

文章评论 (9)
取消回复
  1. A博客 A博客 回复TA
    已经用上了,感谢博主
  2. 小言u 小言u 回复TA
    貌似使用后,图片超链接全都失效了
    1. Qoo Qoo 回复TA
      @小言u我也一直在苦恼这个问题,不知道你的解决了没有
  3. 啊 回复TA
    有多个header文件啊,有主题里的header和admin的header。多个主题都有header
    1. 运营狗 运营狗站长 回复TA
      @啊放到你在使用的主题header中
  4. 夏目贵志 夏目贵志 回复TA
    感谢,感谢!已添加!!
  5. zmmio zmmio 回复TA
    好东西,正在找这个东西,先copy下来,感谢!
  6. nice nice 回复TA
    加上没有效果,不知道哪里没有弄好。。。
  7. 心灵博客 心灵博客 回复TA
    用得着,但先不加吧,保存下来以后用
QQ咨询
QQ号码
979779692
微信咨询
微信二维码
在线咨询
微信咨询 QQ咨询
客服头像

截屏,微信识别二维码

微信号:itx2021

(点击微信号复制,添加好友)

微信号已复制,请打开微信添加好友!