Rails 7.1 的 Lightbox2 未初始化

Question

我正在尝试将 javascript 库 Lightbox2 与 Rails 7.1 应用程序一起使用。

配置/importmap.rb：

pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/dist/jquery.js"
pin "lightbox2", to: "lightbox2.js"

我已经下载了 lightbox2.js 并将其放在供应商/javascript 目录中。

没有 JavaScript 控制台错误，但单击链接时没有任何反应 - 没有报告错误，只是沉默。

我怀疑我需要以某种方式启动灯箱来寻找它的数据灯箱标签，但看不到应该如何完成 - 我需要在 application.js 中添加一些东西吗？

我尝试将下面的各种排列添加到 application.js 中，但总是出现错误，指出 lightbox 没有任何默认导出（我检查过，没有任何默认导出）或找不到 jQuery：

（之前使用 UJS 和 Rails 6 效果很好。）

import "jquery"
import jQuery from 'jquery'

import "lightbox2"
Lightbox2.init()
import Lightbox from "lightbox2"

import lightbox from "lightbox2"
global.lightbox = lightbox

import "lightbox2"
import Lightbox2 from 'lightbox2'
application.register('lightbox2', Lightbox2)

<a data-lightbox="session_photos" href="fullres.jp">
   <img src="lowres.jpg">
</a>

Answer 1

bin/importmap pin lightbox2

由于没有页面重新加载，您必须在

turbo:load

事件上初始化灯箱：

// app/javascript/application.js

import "jquery";
import lightbox from "lightbox2";

document.addEventListener("turbo:load", (event) => {
  lightbox.init();
});