跨多个链接的 Fancybox Observer？

Question

如果我有这个标记：

<a href="#" data-fancybox-content="<p>Content 1</p>"> Click Here for Content 1</a>
<a href="#" data-fancybox-content="<p>Content 2</p>"> Click Here for Content 2</a>
<a href="#" data-fancybox-content="<p>Content 3</p>"> Click Here for Content 3</a>
<a href="#" data-fancybox-content="<p>Content 4</p>"> Click Here for Content 4</a>

我想为每个设置我的 fancybox 观察器，但我希望弹出窗口的 content 设置为每个 link 的 data-fancybox-content，是否有一口气做到这一点的方法？

Answer 1

想通了，我是这样做的：

$('a').each(function() {
    $(this).fancybox({
        content: $(this).attr('data-fancybox-content'),
    });
});

Answer 2

您不需要 .each() 方法，而是使用常规的 fancybox 初始化脚本将您的选择器（或元素）绑定到 fancybox，所以

<a class="fancybox" href="#" data-content="<p>Content 1</p>"> Click Here for Content 1</a>
<a class="fancybox" href="#" data-content="<p>Content 2</p>"> Click Here for Content 2</a>
<a class="fancybox" href="#" data-content="<p>Content 3</p>"> Click Here for Content 3</a>
<a class="fancybox" href="#" data-content="<p>Content 4</p>"> Click Here for Content 4</a>

注意将 javascript events 绑定到全局元素（HTML 标签不是一个好主意) 但使用特异性（CSS 选择器），所以我们将 class fancybox 添加到我们想要绑定到 fancybox 的元素。

还要注意，我们只使用了 data-content 而不是 data-fancybox-content 属性（data-fancybox-{something} 是一个特殊属性，对于 content 没有值）

然后您可以使用 beforeLoad 回调动态设置 content，例如：

jQuery(document).ready(function ($) {
    $('.fancybox').fancybox({
        beforeLoad: function () {
            this.content = $(this.element).data("content");
        }
    });
}); // ready

见JSFIDDLE

PS。您甚至可以通过为元素设置 rel 或 data-fancybox-group 属性来设置 fancybox gallery。您将无法使用 .each() 方法做到这一点。

跨多个链接的 Fancybox Observer？

Fancybox Observer across multiple links?

javascript

jquery

fancybox

fancybox-2