Typecho文章图片添加灯箱效果

寻梦xunm| 674| 收集

3年前

超过1103天温馨提示

本文最后更新于2021年09月13日，已超过1103天没有更新，若内容或图片失效，请留言反馈。

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

先来看看效果

下面开始教程~

引用 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 文件的前

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

完成。

typecho 教程灯箱片

本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。

0 赞 or 打赏

喜欢就打赏一点

Typecho在文章中插入幻灯片的方法

Typecho开启报错提示，方便调试错误

往往免费的还不如收费的

122人气2天前

走失两天的狗子终于找到它的家了

105人气3天前

顶着三十几度的天气去钓鱼了

187人气10天前

"微博客"一款自己开发自己用的垃圾源码（慢慢更新中）

276人气16天前

往往免费的还不如收费的

走失两天的狗子终于找到它的家了

顶着三十几度的天气去钓鱼了

"微博客"一款自己开发自己用的垃圾源码（慢慢更新中）

我的音乐