0

花式弹出式画廊是否可以同时包含视频和内联内容？所以点击我的链接会弹出一个窗口，首先显示一个段落（内联内容），然后用户将在弹出窗口中按下一个箭头来访问视频（在同一个弹出窗口中）。我在任何地方都找不到一个例子。

4

1 回答 1

0

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

  • 图片
  • 视频
  • 内嵌内容
  • 内嵌框架

等等

只需确保您的所有链接共享相同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

于 2013-10-21T06:58:36.670 回答