Fancybox使用不同的方法进行调用

Question

我很难调用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');
}
});
};

Answer 1

您的第二个代码有两个基本问题：

1) 。要以编程方式调用fancybox，您需要在jQuery范围内调用它，如：

function vfancy() {
jQuery.fancybox({
// API options
});
};

但是你用的是这个

function vfancy() {
fancybox({
// API options
});
};

这永远不会奏效。

2) 。请记住，如果已将元素绑定到fancybox(通常为<a>元素)，则只能在任何fancybox回调中使用$(this.element)，但在这种情况下，您是在匿名函数中以编程方式调用fancybox，因此$(this.element)是断章取义的。

你要做的是：

a) 。完全取消beforeLoad回调(这将毫无作用)

b) 。像一样调用vfancy匿名函数时，将data-href属性的值作为参数传递

<a data-href="MBHD0790-03" onclick="vfancy(this.getAttribute('data-href'))" href="javascript:;" >IT WORKS NOW</a>

c) 。将hrefAPI选项添加到fancybox函数中，并从传递给匿名函数(如)的参数中设置其值

function vfancy(url) {
jQuery.fancybox({
href: baseURL + 'assets/media-video/' + url + '.php',
// other API options
});
};

注意匿名函数需要接受参数(vfancy(url))。如果在下面添加更多选项，请注意hrefAPI选项后的逗号。

请参阅JSFIDDLE

---

编辑

您也可以在onclick属性中传递this作为参数，如：

<a href="javascript:;" data-href="1_b.jpg" onclick="vfancy(this)">IT DOES WORK NOW</a>

并像一样得到CCD_ 13函数内的CCD_

function vfancy(url) {
var url = url.getAttribute('data-href');
jQuery.fancybox({
href: baseURL + 'assets/media-video/' + url + '.php',
// API options
padding: 0 //,
});
};

请参阅更新的JSFIDDLE

Answer 2

您需要在对象上正确调用插件：

function vfancy(obj) {
$(obj).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');
}
});
};