Jasmine主题增加图片灯箱效果 - 橙子海

Jasmine主题默认博文中的图片无法点击放大，通过增加灯箱效果实现图片点击放大和切换。实现图片的缩放等操作，并提升观赏性，美观性。

正文开始

自定义css和js

打开typecho后台，打开主题的外观设置界面。将以下代码输入自定义样式。调整顶栏和侧栏的值，使得博客的顶栏和左侧栏不会覆盖图片。

.z-\[1000\] {
    z-index: 500;
}
.z-\[999\] {
    z-index: 500;
}

将以下代码输入自定义脚本：

//图片灯箱
window.ViewImage && ViewImage.init('.markdown-body img');

参考图：

点击保存设置

ssh链接服务器，或进入宝塔文件夹，编辑主题文件夹下的

footer.php插入以下内容。

//插入下面这一行
<script src="https://jsd.onmicrosoft.cn/gh/Tokinx/ViewImage/view-image.min.js"></script>
//php文件中底部 原来就有的如下
<script>
    <?php $this->options->customScript(); ?>
</script>

这串代码https://jsd.onmicrosoft.cn/gh/Tokinx/ViewImage/view-image.min.js 为托管CDN的JS地址

另外一种方式

引用 FancyBox插件
添加到 header.php 中 /head 前面，即底部放js代码的位置
示例：

    <script async src="xxx.js"></script>
    <script async src="xxx.js"></script> 
    随意插入

要插入的代码：

<script type="text/javascript" src="https://cdn.staticfile.org/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

<?php $this->content(); ?> 或者像Jasmine这个主题为  <?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 前即放版权声明的前面
示例：

<?php if (!defined("__TYPECHO_ROOT_DIR__")) {
  exit();
} ?> 

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

<div class="flex flex-col lg:mb-16 py-3   dark:dark:text-gray-500"">

代码：

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