我使用Fancybox 2.0.6来显示图像和视频。滚动图像/视频时(当库中有多个图像时),Fancybox会显示上一个和下一个图标和链接。根据jquery.fancybox.css,可点击区域占据了图像/视频左右两侧的40%。这对图像来说很好,但对视频来说,它会阻止播放按钮,这样用户就可以转到下一个/上一个视频,而不是播放或暂停视频。我想更改可点击区域的宽度,但仅限于视频-我希望图像保持不变。我研究了Fancybox,发现我可以使用wrapCSS为多个Fancybox实例创建自定义样式,但我无法使其发挥作用。
这是我的js调用
<script type="text/javascript">
$(document).ready(function() {
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video'
});
});
</script>
<script>
$(document).ready(function()
{
$('.fancybox').fancybox(
{
padding : 0,
openEffect : 'elastic'
}
);
$(".fancybox").fancybox(
{
wrapCSS : 'fancybox-nav',
closeClick : true,
helpers : {
overlay : {
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
}
);
}
);
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
</script>
以下是我如何在HTML中显示图像和视频:
<a class="fancybox" rel="gallery1" href="image1.jpg">
<a class="fancybox" rel="gallery1" href="image2.jpg">
<a class="vimeo" rel="gallery2" href="videoplayerlink1">
<a class="vimeo" rel="gallery2" href="videoplayerlink2">
我需要在.js文件中添加或更改什么吗?我错过了什么?
首先您需要了解,当您使用wrapCSS
选项时,一个新的class
选择器将添加到fancybox包装(.fancybox-wrap
)中,因此添加选项wrapCSS:'fancybox-nav-video'
意味着当您打开fancybox时,您将获得
<div class="fancybox-wrap fancybox-nav-video ....etc." ....
第二个,您需要为这样的新选择器声明特定的fancybox按钮CSS属性(加载fancybox CSS文件后的内联CSS声明):
.fancybox-nav-video .fancybox-nav {
width: 60px;
}
.fancybox-nav-video .fancybox-nav span {
visibility: visible; /* arrows will be permanently visible */
}
.fancybox-nav-video .fancybox-next {
right: -60px; /* move right outside fancybox area */
}
.fancybox-nav-video .fancybox-prev {
left: -60px; /* move left outside fancybox area */
}
请注意,这些新的css属性将仅应用于具有类fancybox-nav-video
的fancybox包装(我们在其中使用了wrapCSS
选项)。这些css将把按钮和可点击区域放在fancybox之外,清除vimeos的播放按钮。正因为如此,我们使导航箭头永久可见,否则访问者将不知道悬停在哪里。
第三个,您只需要将所有的fancybox自定义脚本封装在一个.ready()
方法中,如:
<script type="text/javascript">
$(document).ready(function() {
// fancybox for vimeo
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video' // add a class selector to the fancybox wrap
});
// fancybox for images
$(".fancybox").fancybox({
// options for images here
});
}); // ready
</script>