在一个fancybox弹出窗口中使用vimeo视频和图像答案

【问题标题】：Using vimeo video and images in one fancybox pop-up在一个fancybox弹出窗口中使用vimeo视频和图像
【发布时间】：2013-05-17 17:02:28
【问题描述】：

<section id="smoking-full">

  <a class="various" data-fancybox-group="group5" title="" data-fancybox-type="iframe"       href="http://player.vimeo.com/video/56039083">
  <a class="fancybox" data-fancybox-group="group4" title="" href="Images/cue/design/2.png">

  <img src="Images/smoking/smoking_full.jpg" alt="2" class="image_full"/></a>

</section>

我已经为每个项目赋予了它自己的花式盒子类，但无论如何可以将它们组合起来，以便弹出窗口将两个项目都放在轮播中？

【问题讨论】：

欢迎来到 SO！你读过常见问题解答吗？基本上，您尝试过的邮政编码

标签： jquery video image-gallery vimeo fancybox-2

【解决方案1】：

基本上，您的所有主播都必须共享相同的class 和相同的data-fancybox-group 才能在同一个图库中。那么每个可能有不同的data-fancybox-type 来区分type 的内容。

所以 html ：

<a class="fancybox" data-fancybox-group="group01" title="" data-fancybox-type="image"  href="http://fancyapps.com/fancybox/demo/1_b.jpg">open image in gallery</a>
<a class="fancybox" data-fancybox-group="group01" title="" data-fancybox-type="iframe" href="http://player.vimeo.com/video/56039083">open video in gallery</a>

由于 fancybox 的图库导航按钮可能会阻止某些视频控件，您可能更喜欢使用 css 将它们移到内容之外（仅适用于 iframe）：

.fancybox-type-iframe .fancybox-nav {
    width: 60px;
}
.fancybox-type-iframe .fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}
.fancybox-type-iframe .fancybox-nav:hover span {
    opacity: 1;
}
.fancybox-type-iframe .fancybox-next {
    right: -60px;
}
.fancybox-type-iframe .fancybox-prev {
    left: -60px;
}

然后您可以将此脚本用于您的画廊

$(".fancybox").fancybox({
    // solves some issues with streamed media
    iframe: {
        preload: false
    },
    // Increase left/right margin for iframe content
    margin: [20, 60, 20, 60]
});

注意我建议设置的 API 选项以避免进一步的问题。

见JSFIDDLE

【讨论】：