惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Y
Y Combinator Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园_首页
量子位
V
Visual Studio Blog
博客园 - Franky
宝玉的分享
宝玉的分享
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 【当耐特】
罗磊的独立博客
小众软件
小众软件
V
V2EX
GbyAI
GbyAI
B
Blog RSS Feed
博客园 - 三生石上(FineUI控件)
大猫的无限游戏
大猫的无限游戏
有赞技术团队
有赞技术团队
月光博客
月光博客
Recent Announcements
Recent Announcements
雷峰网
雷峰网
F
Fortinet All Blogs
M
MIT News - Artificial intelligence

eallion's Blog

春假清明自驾游 Ubuntu 25.10 安装和配置 秋假 彩礼 2025 博客变化 预制菜 联邦礼仪之一 重拾写博客的乐趣 少儿 TED - 时间管理大师 n8n 之同步博客到 Mastodon n8n 之备份 Mastodon 嘟文 如何备份 Mastodon Docker 部署 Mastodon NAS 折腾记 Windows 11 安装软件 博客排版 - 挤压中文标点符号 Hugo 博客集成 Mastodon 独立博客自省问卷 15 题 Chrome 插件更新:网址净化器 在 Hugo 中使用 Shiki 炒菜万能公式 uBlacklist 订阅合集 读《中文互联网正在加速崩塌》 CSS 和 JS 实现博客热力图 受灾小记 那,他吃什么?! Mastodon 同步到 Memos Hugo 外部链接跳转提示页面 联邦宇宙及 Mastodon 简介 2024 博客变化
Twikoo 集成 Slimbox2 灯箱插件
Charles Chin · 2021-07-22 · via eallion's Blog

浏览 Twikoo 的开发者『 iMaeGoo』个人博客的时候,里面有一篇文章 《集成 Twikoo 与 lightGallery 插件,实现评论图片的点击放大》 提到了 Twikoo 集成 lightGallery 灯箱插件。

本博客使用的是 Slimbox2 灯箱插件,按照 iMaeGoo 的思路,利用 Twikoo 的 API onCommentLoaded,很方便的开启的评论的图片灯箱效果。

主要代码是:
@ eallion/eallion.com

<script>
    twikoo.init ({
        //envId: "eallion-###",
        //el: "#tcomment",
        //......
        onCommentLoaded: function () {
            $(".tk-content img:not (.tk-avatar-img)").each (function () {
                var _b = $("<a></a>").attr ("href", this.src);
                $(this).wrap (_b);
            })
            $(".tk-content a [rel!=link]:has (img)").slimbox ();
        }
    });
</script>

当 Twikoo 评论加载完成后,查找 Selector .tk-content 里面是否有图片,如果有图片,就为图片添加一个图片地址 src 本身的 <a> 标签超链接,同时排除 .tk-avatar-img 头像元素。

此方法适合使用 Hello Friend 主题的站点使用,使用 Slimbox2 作为灯箱插件的站点也可参考。

特此记录,备忘。

本博客主要是在『 木木老师』的二次开发的基础上再二次开发。因本人时间、精力、能力有限,没有完整的 ChangeLog ,修改过程并没有记录多少笔记,我都忘记改了些什么,现在就是让我自己复现我也做不到。起初我以为随便改改就能开始用了,没想到越改越多,越改越多,重构了很多破坏性的代码,代码越来越不友好。如果对本博客的代码或功能有需求的可以直接参考本博客完整的源码: eallion/eallion.com,当然直接问我我也会很乐意回答。