前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Twikoo 集成 Slimbox2 灯箱插件

Twikoo 集成 Slimbox2 灯箱插件

作者头像
eallion
发布2022-12-20 14:59:05
5300
发布2022-12-20 14:59:05
举报
文章被收录于专栏:大大的小蜗牛大大的小蜗牛

警告

本文最后更新于 2021-07-22,文中内容可能已过时。

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

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

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

代码语言:javascript
复制
<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,当然直接问我我也会很乐意回答。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-07-222,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档