1 个画廊中的 Fancybox 图片和 youtube

Question

你好 Whosebugers，

我在使用 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)

您还应该使用视频的嵌入 url，您的 <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>

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

1 个画廊中的 Fancybox 图片和 youtube

Fancybox images and youtube in 1 gallery

javascript

youtube

jquery

fancybox-2