javascript - Fancybox不显示-转到youtube

Question

我试图在我的一个网站的首页上添加一个弹出框，用于将youtube视频弹出。当我单击视频时，它会触发单击功能，但不会打开fancybox窗口，而是将页面重定向到实际的youtube视频。

我曾尝试使用preventDefault，但是当我这样做时，我得到一个.fancybox并不是函数异常。

我已经对涉及类似问题的不同帖子进行了相当多的挖掘，但是其中大多数都已经使用了几年，并且这些修复在我的情况下似乎并不有效。

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

<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" />

点击/弹出框调用:

$(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

  });

});

我在函数顶部添加了一条警告消息，以确保它正在执行，并且一旦确认，显然应该将其删除。