使用ashleydw Lightbox出现图片重复预览、导航箭头无法切换问题

异常现象 #

• 点击画廊缩略图时，会连续弹出两次图片预览窗口，第二次弹出的窗口显示正常导航箭头
• 在预览窗口点击下一张导航按钮，无法完成图片切换

问题排查与修复 #

针对「弹出两次预览窗口」的问题 #

• 核心触发原因是事件重复绑定，常见场景包括：
  • 页面重复引入了ekko-lightbox的JS脚本，导致组件挂载了多套点击监听
  • 同时启用了组件自动扫描DOM的默认绑定模式，又额外编写了手动触发ekkoLightbox()方法的点击事件代码，双重触发弹窗逻辑
  • 项目中同时引入了其它带Lightbox预览效果的第三方库，不同库都对带预览属性的a标签做了点击拦截
• 修复操作：
  • 全页面仅保留1次ekko-lightbox的JS脚本引入，删除重复的脚本引用
  • 仅保留单套初始化逻辑，推荐使用官方标准绑定写法，避免重复触发：

    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox({
            // 固定指定画廊父容器，确保分组识别准确
            galleryParent: '#imageGallery'
        });
    });
    

  • 排查其它第三方库的全局点击逻辑，删除针对当前画廊a标签的重复预览触发代码

针对「导航箭头无法切换图片」的问题 #

• 常见触发原因包括：
  • 两次弹窗产生的多个Lightbox实例中，先弹出的无箭头实例没有被正常销毁，拦截了导航按钮的点击事件，后弹出的正常实例无法获得事件响应权限
  • 同一gallery分组下存在图片路径错误（404、大小写不匹配），组件无法识别后续图片的有效地址，中断了导航逻辑
  • 全局JS代码对Lightbox弹窗内的元素做了默认事件拦截，导致导航按钮的点击逻辑被阻断
  • 缺失ekko-lightbox依赖的基础运行环境（jQuery、Bootstrap弹窗相关JS），导致组件内部的导航索引逻辑失效
• 修复操作：
  • 先完成「弹出两次窗口」的问题修复，保证每次点击仅生成一个正常的Lightbox预览实例
  • 逐一检查同分组下所有图片的访问路径，确保不存在加载失败的无效地址
  • 排查全局事件绑定逻辑，删除针对.lightbox容器内导航按钮的preventDefault拦截代码
  • 确认依赖脚本的引入顺序：先加载jQuery，再加载Bootstrap基础JS，最后加载ekko-lightbox的JS文件

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