侧边栏壁纸

Typecho 通过Fancybox 快速实现 给文章图片添加灯箱效果 - Xc主题

2024年02月22日 324阅读 0评论 0点赞

xc开源版主题没有文章图片灯箱效果,为了获得文章图片更好的浏览体验,特意通过引用fancybox来实现该功能。下面分享我使用typecho主题xc引用fancybox实现文章图片灯箱效果的过程。

Fancybox介绍

fancyBox是一款优秀的弹出框Jquery插件,能实现快速预览图片,放大图片,支持使用鼠标滚轮和键盘切换图片等等。总之,FancyBox是一款非常好用的图片灯箱插件。

效果图

fancybox效果

使用教程

1.引入Fancybox

在主题下head.php文件,</head>标签前填入下列代码(Xc开源主题忽略此步骤,其在public/footer.php下已引入)

<link href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" type="ee71b4ea12285dc3ed787f94-text/javascript"></script>

2.添加灯箱效果

 1. Xc主题添加灯箱效果

 打开主题下/core/short.php文件,在if (strpos上面添加如下代码保存即可。

if (strpos($content, 'img src=') !== false) {
    // 使用正则表达式替换图片标签,添加Fancybox的class      
$pattern = '/<img(.*?)src="([^"]+)"(.*?)>/i';      
$replacement = '<span style="display: block;" data-fancybox="Xc"  href="$2"><img$3 src="$2" alt="$4" title="点击放大图片"></span>';  
$content = preg_replace($pattern, $replacement, $content);  
}

添加代码

 2.其他主题添加灯箱效果

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

原理:将原来输出文章内容中的img标签进行替换,使之能够被FancyBox选择。

3.修复FancyBox的Pjax支持

如果网站开启了pjax无加载刷新,最好在footer.php中加入下面代码。

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

—— 评论区 ——

昵称
邮箱
网址
取消
博主栏壁纸
36 文章数
48 标签数
107 评论量