我有以下的fancybox代码:
$('.fancybox').fancybox({
'autoScale' : false,
'href' : $('.fancybox').attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
问题是,我在页面上有20个不同的A标记id,我希望fancyboxhref属性采用单击元素的id,即触发事件的元素。
我试过好几种方法,都没有用!
'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),
这看起来很简单,但每当我插入"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
注意:这适用于fancybox v2.0.6+
另一方面,一个更优雅的解决方案是使用(HTML5)data-*
属性来设置href
(否则设置id="images/01.jpg"
看起来会很奇怪),因此您可以执行:
<a href="#" id="id01" data-href="images/01.jpg" ...
以及您的回拨
beforeLoad: function(){
var url= $(this.element).data("href");
this.href = url
}
并将CCD_ 7属性用于其目的。
EDIT:最好在你的锚点中使用特殊的data-fancybox-href
属性,比如:
<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a>
并使用一个简单的脚本,而不需要像那样的回调
$(".fancybox").fancybox({
// API options
autoScale: false,
type: 'iframe',
padding: 0,
closeClick: false
});
请参阅JSFIDDLE
您可以迭代.fancybox
项目的集合并获取id。
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : $(this).attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});
试试这个:
$(".fancybox").click(function(){
var url = $(this).attr('id');
$.fancybox({
'autoScale' : false,
'href' : url ,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
})
试试这个
$('.fancybox').each( function() {
var elem = jQuery(this);
elem.fancybox({
'autoScale' : false,
'href' : elem.attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
});
}
);
你试过这个吗?
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : this.id,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});