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属性，否则会返回{ {1}}

P.S。如果您不想使用媒体助手，可以将undefined即时更改为youtube的href格式，并将fancbox embed设置为{ {1}}。检查https://stackoverflow.com/a/28462518/1055987了解更多

Fancybox youtube回调无法正常工作

1 个答案: