LightGallery 2.7.0自定义插件接入方法求助

1. 修正WordPress脚本依赖与加载顺序 #

当前脚本引入存在依赖关系错误，会导致插件在lightGallery核心加载前执行，引发未定义报错。修正后的wp_enqueue_script代码如下：

wp_enqueue_script( 'lightgallery', 'https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.0/lightgallery.min.js', array(), '2.7.0', true );
// autoplay插件依赖lightGallery核心
wp_enqueue_script( 'lightgallery-autoplay', 'https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.0/plugins/autoplay/lg-autoplay.min.js', array('lightgallery'), '2.7.0', true );
// 自定义插件依赖lightGallery核心
wp_enqueue_script( 'lightgallery-gallery-plugin', get_template_directory_uri() . '/assets/js/lg-gallery-plugin.js', array('lightgallery', 'jquery'), '1.1', true );
// 配置脚本依赖lightGallery、自定义插件和jQuery
wp_enqueue_script( 'lightgallery-settings', get_template_directory_uri() . '/assets/js/lightgallery-settings.js', array('lightgallery', 'lightgallery-gallery-plugin', 'jquery'), '1.1', true );

要点：

• 核心脚本版本号写实际的2.7.0而非1.1，便于缓存管理
• 所有插件类脚本必须依赖lightgallery，确保核心先加载
• 配置脚本依赖自定义插件，保证插件先注册再初始化

2. 编写符合v2规范的自定义插件 #

LightGallery 2.x采用TypeScript模块化架构，自定义插件必须实现特定接口（至少包含pluginName和init方法）。以下是原生JS编写的示例：

// lg-gallery-plugin.js
(function() {
    // 定义自定义插件对象
    const CustomGalleryPlugin = {
        // 插件唯一标识，必须设置
        pluginName: 'customGallery',
        /**
         * 初始化方法
         * @param {HTMLElement} el - lightGallery挂载的DOM元素
         * @param {Object} instance - lightGallery实例对象
         * @param {Object} data - lightGallery配置参数
         */
        init: function(el, instance, data) {
            this.el = el;
            this.instance = instance;
            this.data = data;

            // 执行你的插件初始化逻辑，比如绑定事件、添加DOM元素等
            this.bindCustomEvents();
        },
        // 自定义事件绑定示例
        bindCustomEvents: function() {
            // 监听lightGallery内置事件
            this.instance.on('afterSlide', () => {
                console.log('当前幻灯片切换完成');
                // 这里可以添加你的自定义逻辑
            });

            // 绑定自定义按钮事件（示例）
            this.el.addEventListener('click', (e) => {
                if (e.target.classList.contains('custom-btn')) {
                    this.instance.nextSlide();
                }
            });
        },
        // 可选：插件销毁时清理资源
        destroy: function() {
            this.instance.off('afterSlide');
        }
    };

    // 将插件注册到lightGallery核心
    if (window.lightGallery) {
        window.lightGallery.registerPlugin(CustomGalleryPlugin);
        // 暴露到window，方便配置脚本调用
        window.CustomGalleryPlugin = CustomGalleryPlugin;
    }
})();

3. 初始化lightGallery并加载自定义插件 #

修改你的配置脚本，确保正确加载自定义插件：

(function ($) {
    'use strict';

    $(document).ready(function () {
        $('#dataTables-example').dataTable();

        // 确保lightGallery核心已加载
        if (window.lightGallery) {
            lightGallery(document.getElementById('lightgallery'), {
                // 加载官方autoplay插件和自定义插件
                plugins: [lgAutoplay, window.CustomGalleryPlugin],
                thumbnail: true,
                selector: '.img-responsive'
            });
        }
    });

}(jQuery));

关键说明 #

LightGallery 2.x不再兼容旧版JS插件的写法，核心差异在于：

• 旧版直接通过原型链或全局挂载扩展，新版采用插件注册机制
• 新版插件必须实现pluginName、init等标准接口，便于核心统一管理生命周期
• 所有插件的加载顺序必须在核心脚本之后，否则无法注册或调用

内容的提问来源于stack exchange，提问作者user15639808