Fancybox youtube 回调不起作用

Question

我正在使用以下代码在 fancybox 中打开一个 youtube 视频。

$("#videos a.fancybox").click(function() {
    $.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'         : 1280,
        'height'        : 720,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
            'wmode'             : 'transparent',
            'allowfullscreen'   : 'true'
        }
    });
    return false;
});

但是我希望它在窗口出现之前做一些事情。我会把它包括在下面。

$("#videos a.fancybox").click(function() {
    $.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'         : 1280,
        'height'        : 720,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
            'wmode'             : 'transparent',
            'allowfullscreen'   : 'true'
        },
        beforeShow: function () {
            var id = this.element.attr("id");
            alert(id);               
        }
    });
    return false;
});

基本上，它会抓取 ID 中的内容并尝试提醒它。使用这段代码，窗口将无法打开，并将重定向到 youtube。如果我输入alert("ohi"); 之类的内容，它将正确显示，但我必须删除 var。有人知道为什么吗？如果我将它包含在另一个 fancybox 代码中，它会起作用，例如：

$('#photos a.fancybox').fancybox({
    type: 'iframe',
    beforeShow: function () {
        var id = this.element.attr("id");
        alert(id);               
    }
});

为什么它不适用于视频？

提前致谢。

Answer 1

我建议您忘记.click() 方法并使用fancybox 媒体助手。

<script src="{your path}/helpers/jquery.fancybox-media.js"></script>

然后以正常方式将您的选择器绑定到fancybox。

这是您调整后的代码：

jQuery(document).ready(function ($) {
    $("#videos a.fancybox").fancybox({
        padding: 0,
        // autoScale: false, // not a valid v2.x option
        // transitionIn: 'none', // not a valid v2.x option
        // transitionOut: 'none', // not a valid v2.x option
        // title: this.title, // not needed or it should be inside a callback
        width: 1280,
        height: 720,
        fitToView: false, // to respect the fixed dimensions above (optional)
        helpers: {
            media: true // enable fancybox media helper
        },
        beforeShow: function () {
            var id = this.element.attr("id");
            alert(id);
        }
    });
}); // ready

注意：假设 class .fancybox 的选择器也有ID 属性，否则返回undefined

---

附：如果您不想使用媒体助手，可以将href on-the-fly 更改为 youtube 的 embed 格式，并将 fancbox type 设置为 iframe。查看https://stackoverflow.com/a/28462518/1055987了解更多信息