Question

我正在尝试构建一个带有一系列图像的视频轮播，点击这些图像后，在同一屏幕上打开一个光盒式视频。图像都链接到相应的视频：

    <div>
        <a class="fancybox" rel="arch" href="video/MotionTest_0001.mp4">
            <img src="img/videoStandIn.png" width="492" height="275" />
        </a>
    </div>

我已检查过检查员，我的浏览器正在正确加载这些脚本/样式表：

<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.4.pack.js">    
</script>

是的，我在文档的正文顶部包含了经常被遗忘的脚本：

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({});
    });
</script>

但是，每次点击链接的视频时，它都会在新窗口中打开，就好像我刚刚在文档中粘贴了常规链接一样。我已经浏览了互联网，我尝试的任何东西似乎都无法解决我的问题。这是一个非常酷的想法，我希望有人可能有任何见解。提前谢谢！

Answer 1

指定data-fancybox-type =＆＃34; iframe＆＃34;用于视频轮播。这是您的代码已更新your fiddle以及另一个工作参考jsfiddle ..这应该对您有所帮助，请告诉我

<a class="fancybox" rel="gallery1" data-fancybox-type="iframe" href="http://www.youtube.com/embed/L9szn1QQfas"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

JS

$(document).ready(function () {
    $('.fancybox').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        nextEffect  : 'none',
        prevEffect  : 'none',
        padding     : 0,
        margin      : [20, 60, 20, 60] // Increase left/right margin
    });
});

为什么我的Fancybox插件会在新窗口中打开本地存储的视频？

1 个答案: