Question

我尝试将youtube视频的fancybox弹出添加到我的某个网站的主页。当我点击视频时，它会触发点击功能，但不会打开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" />

点击/ 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

  });

});

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

Fancybox无法显示 - 导航到youtube而不是

1 个答案: