Fancybox图片和youtube在1个画廊

Fancybox images and youtube in 1 gallery

本文关键字：1个 youtube Fancybox      更新时间：2023-09-26

你好StackOverflowers，

我对fancybox有问题，我想在1个图库中有图片和2个youtube视频。

它确实加载并显示了我的图像，但不会将我的视频放在图库中。很难解释，所以我会把我有这个问题的页面链接到

我加载我的脚本如下：

<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
            }
        }
    });

根据fancybox的文档：

您可以通过添加类名（fancybox.image、fancybox.iframe等）直接指定类型

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

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

相关文章：