我正在尝试使用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>`
好吧，你要么需要更多的咖啡，要么需要更多的睡眠时间;)
:
<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需要。