featherlight.js tagetAttr 和自动启动函数

Question

我想知道默认配置对象的以下属性的用途。根据 github 上的文档：

By default, Featherlight initializes all elements matching defaults.selector on document ready. If you want to prevent this, set $.featherlight.defaults.autostart to false before the DOM is ready.

在"Bind featherlight section"下：

It will then look for the targetAttr (by default "data-featherlight") on this element and use its value to find the content that will be opened as lightbox when you click on the element.

给出以上两个，我正在努力：

阻止 featherlight 在启动时自行加载和初始化
不使用 data-featherlight-xxx 属性，而是使用 data-my-lightbox-xxx 属性。

所以我做了以下事情：

在我的 javascript 中，在 onReady() 函数之前，我添加了：

$.featherlight.defaults.autostart=false;

和

$.featherlight.defaults.targetAttr='data-my-lightbox';

不过，将autostart设置为false似乎没有任何效果。如果我查看源代码，我也看不到任何对它的引用。虽然有一个 'autoBind' 变量。

接下来，我尝试在锚标签上设置 data-my-lightbox 属性：

<a href="#" data-my-lightbox="my-image-gallery.html" ...>

也尝试过：

<a href="my-image-gallery.html" data-my-lightbox="iframe" ...>

但似乎这也被忽略了。直到我做了以下事情：

$('[data-my-lightbox]').featherlight();

以一种看似合乎逻辑的方式，但我的印象是，如果我在 onReady 之前更改默认属性，其余部分就会到位。然后我发现了 autoBind 变量（在 onReady() 之前）：

$.featherlight.autoBind='[data-my-lightbox]';
$.featherlight.defaults.targetAttr='data-my-lightbox';

无需显式 $(..).featherlight 构造即可工作。目前一切顺利。

但是，iFrame 的 width/height 属性似乎仍应为 data-featherlight-xxxxx 而不是 data-my-lightbox-xxxx..可能归因于源代码中的以下行：

var match = this.name.match(/^data-featherlight-(.*)/);

如果我将其更改为类似内容会怎样：

var matchRegEx = RegExp("^"+targetAttr+"-(.*)"); 
var match = this.name.

并更新相关地方的代码？

感谢您的帮助和协助。

Answer 1

正如您发现的那样，updated README 反映了应该使用 autoBind 的事实。

对于最新版本，除了 autoBind 和 targetAttr 之外，您还需要更改 namespace 选项才能获得您想要的结果。

featherlight.js tagetAttr 和自动启动函数

featherlight.js tagetAttr and autostart function

featherlight.js