Typecho文章图片添加灯箱效果

4个月前 教程分享 203°C

这篇文章最后更新于09-13 09:58前,您需要注意相关的内容是否还可用,如有疑问请联系作者!

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

先来看看效果

下面开始教程~

引用 FancyBox插件
把下面内容添加到 header.php 中 </head> 前面

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

完成。

版权声明:本文为博主原创文章,转载请注明出处:https://www.seogo.me/typecho/598.html

版权说明:本站所提供的文章、图片等内容均为用户发布或互联网整理而来,仅供学习参考,如有侵犯您的版权,请联系我们客服人员删除。
本文链接:https://huue.cc/index.php/archives/1304.html
最后编辑: 21年09月13日

随机内容

网友评论

4天前

大佬啥时候参与max/routing的开发啊,把功能加到routing中 https://github.com/topyao/max-routing

6天前

11111

1个月前

1111

1个月前

1

2个月前

e21e12e12

2个月前

菊花残,满腚伤。ଲ