阿良博客-IT业余爱好者的个人学习生活记录

个人学习生活记录
记录学习生活,共同交流进步

Typecho文章图片添加灯箱效果

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

引用FancyBox插件

在主题的 header.php 中 </head> 前面添加下列代码

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

文章中引用

修改主题中的post.php文件,将

<?php $this->content(); ?>或者<?php parseContent($this); ?>(旧版主题)

修改为

<?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文章图片添加灯箱效果

感谢来访,希望本文对您有所帮助!
 本文最后更新于2020年06月02日
 本文为阿良原创文章
 转载请注明出处:阿良博客
如有版权问题,请联系处理 | 当前页面:阿良博客 » Typecho文章图片添加灯箱效果

评论