微极客

不忘初心
砥砺前行

Typecho用FancyBox灯箱

把下面内容添加到前面

<script src="http://libs.baidu.com/jquery/2.0.0/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;
?>

把下面js添加到 footer.php 文件的</body>前

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

附上一张效果图 Typecho用FancyBox灯箱

本原创文章未经允许不得转载 | 当前页面:微极客 » Typecho用FancyBox灯箱

评论

此文章无法评论