我无法调用 fancybox。业余问题。当我尝试使用 fancybox iframe 打开视频时,下面的代码工作正常,但最后一个代码却不能。我该如何修复它?
<a href="javascript:;" data-href="MBHD0790-03" class="iframe" ">WORKS</a>
$(".iframe").fancybox({
'width': 720,
'height': 410,
'type': 'iframe',
'autoScale': false,
'autoSize': false,
'autoDimensions': false,
'padding': 0,
'beforeLoad' : function(){
var url = $(this.element).data("href");
this.href = baseURL+'assets/media-video/'+url+'.php';
},
'beforeShow': function(){
$(window).on({
'resize.iframe' : function(){
$.fancybox.update();
}
});
},
'afterClose': function(){
$(window).off('resize.iframe');
}
});
当我使用上面的代码时,我的 fancybox 工作正常,但是当我尝试使用另一个函数调用时则不起作用。
<a href="javascript:;" data-href="MBHD0790-03" onclick="vfancy(this)">DOESNT WORK</a>
function vfancy(){
fancybox({
'width': 720,
'height': 410,
'type': 'iframe',
'autoScale': false,
'autoSize': false,
'autoDimensions': false,
'padding': 0,
'beforeLoad' : function(){
var url = $(this.element).data("href");
this.href = baseURL+'assets/media-video/'+url+'.php';
},
'beforeShow': function(){
$(window).on({
'resize.iframe' : function(){
$.fancybox.update();
}
});
},
'afterClose': function(){
$(window).off('resize.iframe');
}
});
};
最佳答案
您的第二个代码有两个基本问题:
1).要以编程方式调用 fancybox,您需要在 jQuery 范围内调用它,例如:
function vfancy() {
jQuery.fancybox({
// API options
});
};
...但你正在使用这个
function vfancy() {
fancybox({
// API options
});
};
...这永远不会起作用。
2).请记住,您只能在任何 fancybox 回调中使用 $(this.element)
回调 如果您已将元素绑定(bind)到 fancybox(通常是 <a>
元素),但在本例中您以编程方式调用 fancybox在匿名函数中,因此 $(this.element)
脱离了上下文。
你要做的是:
a).完全摆脱 beforeLoad
回调(这不会执行任何操作)
b).当您像这样调用它时,将 data-href
属性的值作为 vfancy
匿名函数的参数传递
<a data-href="MBHD0790-03" onclick="vfancy(this.getAttribute('data-href'))" href="javascript:;" >IT WORKS NOW</a>
c)。将 href
API 选项添加到您的 fancybox 函数中,并从传递给匿名函数的参数中设置其值,如
function vfancy(url) {
jQuery.fancybox({
href: baseURL + 'assets/media-video/' + url + '.php',
// other API options
});
};
注意匿名函数需要接受参数 (vfancy(url)
)。如果您在下面添加更多选项,另请注意 href
API 选项后面的逗号。
参见JSFIDDLE
<小时/>编辑
您还可以在 this
属性中传递 onclick
作为参数,如下所示:
<a href="javascript:;" data-href="1_b.jpg" onclick="vfancy(this)">IT DOES WORK NOW</a>
...并在 data-href
函数中获取 vfancy
属性的值,如
function vfancy(url) {
var url = url.getAttribute('data-href');
jQuery.fancybox({
href: baseURL + 'assets/media-video/' + url + '.php',
// API options
padding: 0 //,
});
};
查看更新后的JSFIDDLE
关于javascript - Fancybox 的调用方法不同的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30201496/