我正在使用fancybox播放一些youtube视频,我希望导航按钮(叠加层旁边的下一个和上一个按钮)与THIS小提琴一样。
这是我的fancybox:
$('.fancybox-media')
.attr('rel', 'playlist')
.fancybox({
openEffect: 'none',
closeEffect: 'none',
prevEffect: 'none',
nextEffect: 'none',
arrows: false,
helpers: {
media: {}
},
overlay : {
css: { 'overflow-y': 'hidden' }
},
youtube : {
autoplay: 1,
hd: 1,
wmode: 'opaque', // shows X to close
vq: 'hd720' // default 720p hd quality
},
beforeShow : function(){
$("body").css("overflow", "hidden"); // hide body scrollbar
},
afterClose: function(){
$("body").css("overflow", "scroll"); // show body scrollbar
}
});
关于来自JFK的this帖子,我把这些样式放在我的css文件中:
.fancybox-lock {
margin: 0 !important;
}
.fancybox-nav {
width: 60px;
}
.fancybox-nav span {
visibility: visible;
}
.fancybox-next {
right: -60px;
}
.fancybox-prev {
left: -60px;
}
和我的HTML:
<li class="closed">Headline
<ul>
<li class="fl"><a class="fancybox-media" href="http://www.youtube.com/watch?v=Dtb5Srdx7iY" rel="playlist"><img class="thumbnail" src="x.jpg"></a></li>
<li class="fl"><a class="fancybox-media" href="http://www.youtube.com/watch?v=Dtb5Srdx7iY" rel="playlist"><img class="thumbnail" src="x.jpg"></a></li>
</ul>
</li>
和实现的样式表:
<!-- FancyBox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.4"></script>
<script type="text/javascript" src="fancybox/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.4" media="screen" />
我无法让这个工作,我不知道为什么。我觉得我错过了一些文件。
答案 0 :(得分:2)
嗯,JFK(我)的this post已经超过一年了,因此最新版本的fancybox可能会推翻已接受的答案,所以你现在应该忘掉它。
您需要的唯一CSS与您在帖子开头提到的fiddle中相同:
.fancybox-nav {
width: 60px;
}
.fancybox-nav span {
visibility: visible;
}
.fancybox-next {
right: -60px;
}
.fancybox-prev {
left: -60px;
}
...然后,你的jQuery代码不需要这些行,所以你可以删除它们
overlay : {
css: { 'overflow-y': 'hidden' }
}
beforeShow : function(){
$("body").css("overflow", "hidden"); // hide body scrollbar
},
afterClose: function(){
$("body").css("overflow", "scroll"); // show body scrollbar
}
...因为fancybox v2.1.4已经处理了
最后,既然你说过I would like to have navigation buttons (next and previous buttons beside the overlay)
,那么在你的代码中使用这个选项是没有意义的,
arrows: false
......是吗?所以删除它。请参阅 JSFIDDLE