Typecho博客快速实现图片灯箱效果

  筱晗's
2021-04-14 / 0 评论 / 185 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月19日,已超过158天没有更新,若内容或图片失效,请留言反馈。

今天给大家分享一个Typecho程序的图片灯箱实现案例!
c8e806ca9e80800ec4c4c87384607aba.jpg

引入jQuery和fancybox

如果已经引入就不需要再次引入了
首先将下列代码加入到header.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 $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;
?>

注意事项

如果是instantclick全站无刷新,想要分离文章页的样式文件请在首页引入灯箱的css,否则会出现灯箱功能失效的情况。

0

评论 (0)

取消