跳过正文
  1. Blogs/

Twikoo集成Slimbox2灯箱插件

·473·1分钟· ·
代码 Twikoo-Slimbox Blog Code Slimbox Twikoo 备忘
目录

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

本博客使用的是Slimbox2灯箱插件,按照iMaeGoo的思路,利用TwikooAPI 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,当然直接问我我也会很乐意回答。


Click to load Giscus
or