[英]Fancybox Observer across multiple links?
If I have this markup: 如果我有此标记:
<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>
And I want to set up my fancybox observer for each of those, but I want the content
of the popup set to each link's data-fancybox-content, is there a way to do that in one fell swoop? 而且我想为每一个设置我的fancybox观察器,但是我想将弹出窗口的
content
设置为每个链接的data-fancybox-content,有没有办法一口气做到这一点?
You don't need the .each()
method but use the regular fancybox initialization script to bind your selectors (or elements) to fancybox, so 您不需要
.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>
Notice that is not a good idea to bind javascript events to global elements (HTML tags) but use specificity (CSS selectors) instead, so we added the class fancybox
to the elements we want to bind to fancybox. 请注意 ,将javascript 事件绑定到全局元素(HTML标记)不是一个好主意,而是使用特定性(CSS选择器),所以我们在要绑定到fancybox的元素上添加了
fancybox
类 。
Also notice that we only used data-content
instead of data-fancybox-content
attributes ( data-fancybox-{something}
is an special attribute that has no value for content
) 还要注意,我们只使用了
data-content
而不是data-fancybox-content
属性( data-fancybox-{something}
是一个特殊的属性,对content
没有任何价值)
Then you can set the content
dynamically using the beforeLoad
callback like : 然后,您可以使用
beforeLoad
回调动态设置content
例如:
jQuery(document).ready(function ($) {
$('.fancybox').fancybox({
beforeLoad: function () {
this.content = $(this.element).data("content");
}
});
}); // ready
PS. PS。 you could even set a fancybox gallery by setting a
rel
or data-fancybox-group
attribute to your elements. 您甚至可以通过为元素设置
rel
或data-fancybox-group
属性来设置fancybox画廊。 You wouldn't be able to do that with the .each()
method. 您将无法使用
.each()
方法执行此操作。
Figured it out, here's how I did it: 想通了,这是我的方法:
$('a').each(function() {
$(this).fancybox({
content: $(this).attr('data-fancybox-content'),
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.