如何防止 Featherlight 灯箱创建递归对话框？

Question

我有一些照片缩略图和元数据，我正在使用 Featherlight Lightbox 在单击缩略图时显示更大的预览。

我的偏好是让 Featherlight 重复使用缩略图的 HTML 进行预览，这样我就不必渲染它两次。例如，

<div id="pv47" class="photo">
  <img class="preview" u="image" src="blah.jpg" data-featherlight="#pv47" />
  <div class="title">Title and year</div>
  <a class="purchase" href="blah.php">Purchase</a>
  <a class="like" href="javascript:makeLike(47);">Like</a>
</div>

这很漂亮——使用基本的 CSS，在缩略图模式下 "purchase" link 被隐藏并且图像很小，而在 Featherlight 对话框中，图像更大并显示 "purchase" link。

问题在于，当 Featherlight 创建对话框时，它会将 绑定到它自己的 副本 img。因此，如果有人在 Featherlight 中查看图像并单击较大的图像，则会在其前面创建另一个 Featherlight 对话框，依此类推。

如何防止 Featherlight 绑定到它自己的 DOM 并创建递归灯箱？

我考虑过将 "data-featherlight" 元素移动到 parent div，但我只希望缩略图可点击，而不是标题（当然也不会覆盖 "like" 按钮的目标）。

我知道我可以只渲染两次信息，一次用于缩略图（使用 featherlight-data 属性），一次用于预览（没有所述属性），但我一直在寻找更优雅的东西.

Answer 1

您可以使用 filter 在层次结构上方进行绑定：

<div data-featherlight data-featherlight-filter=".preview">
  <div id="pv47" class="photo">
    <img class="preview" u="image" src="blah.jpg" data-featherlight-jquery="#pv47" />
    <div class="title">Title and year</div>
    <a class="purchase" href="blah.php">Purchase</a>
    <a class="like" href="javascript:makeLike(47);">Like</a>
  </div>
</div>

如果您的图片是动态添加的，data-featherlight 和 data-featherlight-filter 的组合将不起作用，因此您要么在动态添加后自行绑定它们，要么使用下面的其他解决方案。

或者我认为你可以拦截 featherlight 中的点击：

$(document).on('click', '.featherlight [data-featherlight]', function(evt) {
  evt.preventImmediatePropagation();
});

最后，另一种方法是指定一个 beforeOpen 来检查给定的 event 和 return false，比如说：

$.featherlight.prototype.beforeOpen = function(event) {
  if (event.currentTarget.closest('.featherlight').length)
    return false;
}

如何防止 Featherlight 灯箱创建递归对话框？

How can I prevent the Featherlight lightbox from creating recursive dialogs?

css

jquery

featherlight.js