春未绿,鬓先丝。人间别久不成悲。
开屏动画

在typecho中给文章图片添加灯箱效果

技术 2 评 399 度
机器人
AI摘要
Gemini

来咯,你的文章图片终于可以闪亮登场了!只需几个简单的步骤,你的文章图片就能获得神奇的灯箱效果,让你看图爽到飞起!效果堪比电影院,还不快给你的图片安排上?

效果展示

2023-10-17T08:51:06.png

引用 FancyBox插件

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.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>

修改post.php

打开post.php,将

<?php $this->content(); ?> 或者像我这个主题为  <?php echo handleContent($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;
?>

初始化FancyBox

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

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

完成。

央视视频下载后花屏的解决办法
广告图片
AD
2 评论
    小彦 Firefox Browser 115 Linux 广东省珠海市
    2023年10月22日回复

    fancybox 经典好用

      湘铭呀! Chrome 111 Windows 10 福建省宁德市
      2023年10月23日回复

      @小彦 大佬们的作品经久不衰

  • 小星星变奏曲 - 莫扎特
  • Moon River - Audrey Hepburn