[英]How do I make fancybox href dynamic?
I have the following fancybox code: 我有以下fancybox代码:
$('.fancybox').fancybox({
'autoScale' : false,
'href' : $('.fancybox').attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
the problem is I have twenty different A tag id's on the page and I want the fancybox href attribute to take the id of the clicked element, ie the one that triggered the event. 问题是我在页面上有20个不同的A标签ID,我希望fancybox href属性采用clicked元素的ID,即触发事件的ID。
I have tried several things, none of them have worked! 我尝试了几件事,但都没有成功!
'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),
This seems so simple but anytime I plug in 'this' or similar nothing works. 这似乎很简单,但是任何时候我插入“ this”或类似的东西都不起作用。
Without each()
or click()
simply add the beforeLoad
callback to your script like this 无需
each()
或click()
只需将beforeLoad
回调添加到脚本中即可,如下所示
$(".fancybox").fancybox({
autoScale: false,
// href : $('.fancybox').attr('id'), // don't need this
type: 'iframe',
padding: 0,
closeClick: false,
// other options
beforeLoad: function () {
var url = $(this.element).attr("id");
this.href = url
}
}); // fancybox
NOTE : this is for fancybox v2.0.6+ 注意 :这适用于fancybox v2.0.6 +
On the other hand, a more elegant solution is to use (HTML5) data-*
attribute to set the href
(it would look weird to set id="images/01.jpg"
otherwise) so you could do : 另一方面,更优雅的解决方案是使用(HTML5)
data-*
属性设置href
(否则,设置id="images/01.jpg"
看起来很奇怪),因此您可以这样做:
<a href="#" id="id01" data-href="images/01.jpg" ...
and your callback 和你的回调
beforeLoad: function(){
var url= $(this.element).data("href");
this.href = url
}
and use the id
attribute for what is meant for. 并使用
id
属性表示含义。
EDIT : The best is to use the special data-fancybox-href
attribute in your anchor like : 编辑 :最好是在锚中使用特殊的
data-fancybox-href
属性,例如:
<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a>
and use a simple script without callback like 并使用没有回调的简单脚本
$(".fancybox").fancybox({
// API options
autoScale: false,
type: 'iframe',
padding: 0,
closeClick: false
});
You can iterate over your collection of .fancybox
items and grab the id. 您可以遍历
.fancybox
项目的集合并获取ID。
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : $(this).attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});
Try this: 尝试这个:
$(".fancybox").click(function(){
var url = $(this).attr('id');
$.fancybox({
'autoScale' : false,
'href' : url ,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
})
Try this 尝试这个
$('.fancybox').each( function() {
var elem = jQuery(this);
elem.fancybox({
'autoScale' : false,
'href' : elem.attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
});
}
);
Have you tried this? 你有尝试过吗?
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : this.id,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.