Fancybox 不显示 - 改为导航到 youtube

Question

我尝试将 youtube 视频的花式弹出框添加到我的一个网站的主页。当我点击视频时，它会触发点击功能，但不会打开fancybox窗口，而是将页面重定向到实际的youtube视频。

我尝试过使用 preventDefault，但是当我这样做时，我得到一个 .fancybox is not a function exception。

我已经对有类似问题的不同帖子进行了相当多的挖掘，但其中大多数都是几年前的问题，修复似乎对我的情况无效。

这是我的脚本/样式调用：

<script src="/shared_Gen/jQuery/FancyBox/v1.0/jquery.fancybox-1.0.0.js" type="text/javascript"></script>
<link href="/shared_Gen/jQuery/FancyBox/v1.0/fancy.css" rel="stylesheet" type="text/css" />

点击/fancybox 调用：

$(document).ready(function () {
    $("a.fancybox").click(function (event) {

        $.fancybox({
            'hideOnContentClick': false,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'title': this.title, // optional
            'width': 680, // or your size
            'height': 495,
            'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type': 'swf',
            'swf': {
                'wmode': 'transparent',
                'allowfullscreen': 'true'
            }
        }); // fancybox

        return false;
    });

});

div 和链接：

<div id="video_player">
<a href="https://www.youtube.com/watch?v=vpyB7lF5fqk" class="fancybox">
    <img src="http://img.youtube.com/vi/vpyB7lF5fqk/default.jpg" alt="YouTube" width="300" height="169" />
</a>
</div>

我不确定我错过了什么，但我已经花了很多时间来完成本应轻松的任务......

提前致谢！

Answer 1

在回调函数的顶部尝试event.preventDefault()。我假设您在某处出现错误（可能是fancybox 未正确包含并且不作为$ 上的函数存在）并且永远不会到达return false。

$(document).ready(function () {
  $("a.fancybox").click(function (event) {

    event.preventDefault();

    alert('Fancybox click handler fired!');

    $.fancybox({
        'hideOnContentClick': false,
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'title': this.title, // optional
        'width': 680, // or your size
        'height': 495,
        'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type': 'swf',
        'swf': {
            'wmode': 'transparent',
            'allowfullscreen': 'true'
        }
    }); // fancybox

  });

});

我在函数顶部抛出了一条警告消息，只是为了确保它正在执行并且一旦确认就应该被删除。