fancyBox 是一款优秀的弹出框 Jquery 插件,点击图片时可以得到弹出放大的效果。具体效果如下图所示:

未点击图片效果:

Typecho 添加图片弹出框 fancyBox

点击图片之后效果:

Typecho 添加图片弹出框 fancyBox

修改 header.php

</head> 之前加入如下代码:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> 
   <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

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

修改 footer.php

</body> 前加入以下代码:

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

本文参考自:Typecho文章图片添加灯箱效果 - 运营狗

标签: Typecho, fancyBox

已有 3 条评论

  1. 好东西

  2. 友情提示:header.php 中需要修改的部分少了一个>,如图中红箭头所示

添加新评论