fancybox 没有用于视频库的导航按钮，但它在小提琴中工作
Posted
技术标签:
【中文标题】fancybox 没有用于视频库的导航按钮，但它在小提琴中工作【英文标题】：fancybox no navigation buttons for video gallery, but its working in fiddle 【发布时间】：2013-06-19 17:53:03 【问题描述】：我正在尝试使用 youtube 视频制作精美的盒子，我通过这个小提琴（在评论中添加），这个小提琴我从堆栈溢出仅由 @JK 获得。它在小提琴中工作正常，但是当我复制并在我的应用程序中应用它时，导航按钮功能不存在，并且缺少背景灯箱。我对 jquery 很陌生。 以下是我的html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" />
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
$(".fancybox").attr('rel', 'gallery').fancybox(
openEffect : 'none',
closeEffect : 'none',
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
margin : 50 );
</script>
<script type="text/css">
.fancybox-nav
width: 60px;
.fancybox-nav span
visibility: visible;
.fancybox-next
right: -60px;
</script>
</HEAD>
<BODY>
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1&wmode=opaque">Video #1</a><br />
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/cYplvwBvGA4?autoplay=1&wmode=opaque">Video #2</a>
</BODY>
</HTML>`
我错过了什么吗？
【问题讨论】：
这是我推荐的小提琴jsfiddle.net/fhpZ5 【参考方案1】：嗯，你要么需要更多的咖啡，要么需要更多的睡眠时间；）
这个：
<script type="text/css">
.fancybox-nav
width: 60px;
.fancybox-nav span
visibility: visible;
.fancybox-next
right: -60px;
</script>
应该是：
<style type="text/css">
.fancybox-nav
width: 60px;
.fancybox-nav span
visibility: visible;
.fancybox-next
right: -60px;
</style>
...如果你能看出区别。
此外，最好将自定义的 fancybox 脚本包装在 .ready() 方法中，例如
<script type="text/javascript">
$(document).ready(function()
$(".fancybox").attr('rel', 'gallery').fancybox(
openEffect : 'none',
closeEffect : 'none',
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
margin : 50
);
);
</script>
请注意，我将type="text/javascript" 添加到script 标记中，因为您使用的DOCTYPE 需要这样做。
【讨论】：
在 IE 9 中，它直接进入 youtube 网站。灯箱效果不来了 @user2502314 - 检查 js 错误和您的 doctype ... 或分享一个链接，我可以更快地告诉您是什么破坏了您的代码以上是关于fancybox 没有用于视频库的导航按钮，但它在小提琴中工作的主要内容，如果未能解决你的问题，请参考以下文章
视频没有播放嵌入式vimeo视频jquery fancybox？