我正在使用 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 文件中添加或更改任何内容?我错过了什么?