方法是和WP上是一样的,先要选择自己喜欢的暗箱样式,一般都会选择FACEBOX、Lightbox当然其他的也一样。这些插件提供了一种简单的方式为图片、网页和多媒体添加灯箱功能。
1576825165(1).png
1、引用 FancyBox插件

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--如果主题已经引用了jQuery库,可以忽略这条-->
<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>

2、给文章图片添加标签

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

用上面的代码替换post.php里的

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

3、在头部或者尾部初始化

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

打完收工,其他插件方法是一样的,就是添加图片标签不太一样。

标签: typecho, 图片, 暗箱

已有 5 条评论

  1. terry terry

    你好 我按照你这个来操作了 但是最后 点击以后出现的是原始地址的大图 并没有暗箱 不知道怎么回事 谢谢

    1. 我也出现的是原始地址,没有暗箱,很奇怪,希望博主完善一下

  2. terry terry

    Uncaught ReferenceError: jQuery is not defined
    at jquery.fancybox.min.js:12

  3. 阵雨兄 阵雨兄

    用上了很不错,很有意思,喜欢这种轻量化的小插件。

  4. 博主你好,用了这个代码之后出现的是图片的原地址,没有出现暗箱,希望完善一下

添加新评论