jquery - 如何防止 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，在缩略图模式下“购买”链接被隐藏并且图像很小，而在 Featherlight 对话框中，图像更大并且显示“购买”链接。

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

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

我考虑过将“data-featherlight”元素移动到父级 div，但我只希望缩略图可点击，而不是标题(当然也不会覆盖“喜欢”按钮的目标).

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

Answer 1

您可以使用过滤器在层次结构上方进行绑定(bind):

<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 的组合将不起作用，所以你要么在添加它们之后自己绑定(bind)它们动态地，或者您使用下面的其他解决方案。

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

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

最后，另一种方法是指定一个 beforeOpen 来检查给定的 event 并返回 false，例如:

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