javascript - 1 个图库中的 Fancybox 图片和 YouTube

Question

你好 StackOverflowers，

我在使用 fancybox 时遇到问题，我希望在 1 个图库中包含图像和 2 个 YouTube 视频。

它确实会加载并显示我的图像，但不会将我的视频放入图库中。很难解释so I will link the page where i have this problem here

我按如下方式加载脚本:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="/style/jquery.fancybox.css" media="screen" />
    <script type="text/javascript" src="/js/jquery.fancybox-thumbs.js"></script>
    <script type="text/javascript" src="/js/jquery.fancybox-media.js"></script>
    <link rel="stylesheet" type="text/css" href="/style/style.css">
    <link rel="stylesheet" type="text/css" href="/style/jquery.fancybox-thumbs.css" />
    <link rel="stylesheet" type="text/css" href="/style/3dsmax.css" />

我正在使用一些助手:

$('a.fancybox').fancybox({
        prevEffect : 'none',
        nextEffect : 'none',

        closeBtn  : true,
        arrows    : true,
        nextClick : true,


        helpers : {
            thumbs : {
                width  : 50,
                height : 50
            }
        }
    });

Answer 1

根据 fancybox 的文档:

You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc)

您还应该使用视频的嵌入网址，您的 <a>标签现在应该如下所示:

<a class="fancybox hidden fancybox.iframe" data-fancybox-group="gallery4" href="https://www.youtube.com/embed/8so-fsGxXZ8"><img src="./Chris Holstein's Portfolio_files/cdpreview.jpg"></a>
<a class="fancybox hidden fancybox.iframe" data-fancybox-group="gallery4" href="https://www.youtube.com/embed/USNfjkTny78"><img src="./Chris Holstein's Portfolio_files/doospreview.jpg"></a>

顺便说一句，你应该避免带空格的文件名，有时它会导致奇怪的行为......