Typecho 使用 fslightbox 给图片添加暗箱效果

Typecho教程 2022-01-24 2021℃ 4 3

以前我是很喜欢使用FancyBox来提供暗箱效果的,但是FancyBox是纯收费插件。fslightbox同样是收费插件,但是免费部分我们已经够用了。

效果

fslightbox_demo.pngfslightbox_demo.png

教程

下面开始教程~
引用fslightbox

fslightbox.zip
下载方式:免费下载更新时间:2022-01-24 02:01:02下载次数:367

把下面内容添加到header.php</head>前面

<script src="fslightbox.min.js"></script> 

修改post.php

打开post.php,将

<?php $this->content(); ?>

修改成

<?php
    $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
    $replacement = '<a href="$1" data-fslightbox="gallery"><img src="$1" alt="'.$this->title.'" title="点击放大图片" /></a>';
    $content = preg_replace($pattern, $replacement, $this->content);
    echo $content;
?>

pjax/ajax 只需要在重载的时候添加一行代码refreshFsLightbox(); 完美解决问题。

最后

对,就是这么简单

评论 (4)

  • 该评论仅登录用户及评论双方可见

    回复
    • 我觉得工作量不小,而且意义不太大。而且你用过我的编辑器插件吗?

      回复
Top