<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>
我已经为每个项目提供了自己的花式盒子类,但是是否有办法将它们组合起来,以便弹出窗口在轮播中同时包含这两个项目?
最佳答案
基本上,所有 anchor 都必须共享相同的class
和相同的data-fancybox-group
才能位于同一个图库中。然后每个可能有不同的data-fancybox-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
关于jquery - 在一个 fancybox 弹出窗口中使用 vimeo 视频和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16614425/