我使用colorbox插件,我想在图库中包含一些视频,请参阅以下代码: http://jsfiddle.net/29Bb4/基本上,当下一项加载任何想法时,视频无法加载?
当我这样使用时:
$(".group1").colorbox({rel:'group1', iframe:true, width:"80%", height:"80%"});
它破坏了图库效果:
- 或者有什么好的弹出插件可以同时使用图像和视频吗?
您对两种内容类型(图像和 iframe)有不同的设置。 将它们显示为同一组很容易,但您必须单独定义它们的设置:
$(".group1").colorbox({rel:'group1'});
$(".iframe").colorbox({rel:'group1', iframe:true, width:"80%", height:"80%"});
由于在您的问题中您允许替代解决方案/插件,我建议您使用 fancybox。 这是您的示例 html 的演示。
http://jsfiddle.net/lucuma/Skpyw/3/
http://fancyapps.com/fancybox/
<p><a class="group1" rel="group1" href="http://www.jacklmoore.com/colorbox/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" rel="group1" href="http://www.jacklmoore.com/colorbox/content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" rel="group1" href="http://www.jacklmoore.com/colorbox/content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
<p><a class='group1 fancybox.iframe' rel="group1" href="http://www.youtube.com/embed/KHy7DGLTt8g?rel=0" title="video">Video (Iframe/Direct Link To YouTube)</a></p>
$(".group1").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
$('#btnOpen').click(function(e) {
e.preventDefault();
$('.fancybox:eq(0)').click();
});