Jquery - fancybox 和回调函数

Question

我遇到了fancybox的问题。
我想写一个函数，在fancybox打开时运行。如何以及何时调用该函数？

示例：

function myFunc() {
    alert("Opened!");
}

$('.content a').fancybox({ 
    'hideOnContentClick': false ,
    'callBackOnShow': myFunc(), // This not working! It call function when page is loaded
    'frameWidth': 920,
    'frameHeight': 530
});

- sasa

---

如果有人来这里寻找新版Fancybox的回调方法：请检查是否有“onComplete”属性。 - AsTeR

自fancybox 2版本起，该事件已更改为afterLoad。http://fancyapps.com/fancybox/#docs - coderates

Answer 1

不要使用myFunc（），而要使用myFunc。在Javascript中，带有括号（和/或参数）的函数表示您想要调用它。没有括号的函数名称表示您只想引用该函数（这可能是fancybox希望从您那里得到的）。

- Matt Briggs

Answer 2

这个有效

$("#element").fancybox({
    onStart     :   function() {
        return window.confirm('Continue?');
    },
    onCancel    :   function() {
        alert('Canceled!');
    },
    onComplete  :   function() {
        alert('Completed!');
    },
    onCleanup   :   function() {
        return window.confirm('Close?');
    },
    onClosed    :   function() {
        alert('Closed!');
    }
});

- Gabriel

---

我想知道为什么原始的回调函数不起作用：http://fancyapps.com/fancybox/#docs - mirelon

Answer 3

最新的使其工作的方法是使用afterShow或beforeShow：

$("a#registrace").fancybox({
  beforeShow   : function() {
    alert('its working!');
    validate_reg_form();
  }
});

我正在使用ajax加载注册表单，我需要启用表单验证。无论是在加载前还是加载后，内容已经被加载。

- Qwerty

Answer 4

实际上，在查看文档时，您的选项列表中有一个错别字...

您有一个 callBackOnShow，但它应该是 callbackOnShow（小写 b）

- Rik Heywood

Answer 5

It should be:-

function myFunc() {
    alert("Opened!");
}

$('.content a').fancybox({ 
    'hideOnContentClick': false ,
    'callBackOnShow': myFunc, // no brackets
    'frameWidth': 920,
    'frameHeight': 530
});

或者，您可以创建一个匿名函数...

$('.content a').fancybox({ 
    'hideOnContentClick': false ,
    'callBackOnShow': function() { alert('hello'); },
    'frameWidth': 920,
    'frameHeight': 530
});

- Rik Heywood

Answer 6

'callbackOnShow': myFunc

小写字母b是因为选项区分大小写，而且myFunc没有括号，因为你想将函数作为选项传递，而不是调用它。

- Mario Menger

Answer 7

根据您的标题“Jquery-fancybox和回调”，您可以在回调选项卡下找到fancybox 2插件的完整回调选项列表。

http://fancyapps.com/fancybox/#docs

如果您正在使用旧版fancybox，则可以升级到fancybox2，因为新插件具有更好的特性和更多的控制。

- James Nicholson