Typecho快速实现灯箱效果
分类:教程分享 评论:0条 阅读:164次

Typecho快速实现灯箱效果

分类:教程分享 评论:0条 阅读:164次

引入jQuery和fancybox

PS:如果已经引入jQuery就不需要了

加入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,否则会出现灯箱功能失效的情况。

评论区
icon_mrgreen.gificon_neutral.gificon_twisted.gificon_arrow.gificon_eek.gificon_smile.gificon_confused.gificon_cool.gificon_evil.gificon_biggrin.gificon_idea.gificon_redface.gificon_razz.gificon_rolleyes.gificon_wink.gificon_cry.gificon_surprised.gificon_lol.gificon_mad.gificon_sad.gificon_exclaim.gificon_question.gif