Question

fancybox弹出库是否可以同时包含视频和内嵌内容？因此，单击我的链接将弹出一个窗口，首先显示一个段落（内联内容），然后用户将按下弹出窗口中的下一个箭头以获取视频（在同一个弹出窗口中）。我无法在任何地方找到一个例子。

Answer 1

您可以在fancybox中拥有一个包含不同type内容的图库：

图像
视频
内联内容
I帧

等

只需确保您的所有链接共享相同的rel或data-fancybox-group属性，例如：

<a rel="gallery" class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1&wmode=opaque">This open a video</a>
<a rel="gallery" class="fancybox" href="#inline">this open inline content</a>
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg">this open an image</a>

<div id="inline" style="display: none;">
    <h2>Inline Content</h2>
    <p>Lorem ipsum</p>
</div>

然后你可以使用一个简单的脚本，如：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        //API options here
    });
}); // ready

参见 JSFIDDLE

注意，YouTube视频使用embed格式，因此我们添加了特殊的fancybox类fancybox.iframe以iframe模式打开视频

包含内联内容和视频的Fancybox图库

1 个答案: