当 vimeo 视频设置为显示为画廊时，fancybox 中的上一个和下一个按钮会干扰该视频的播放按钮

Posted 2023-02-25

【中文标题】当 vimeo 视频设置为显示为画廊时，fancybox 中的上一个和下一个按钮会干扰该视频的播放按钮

【英文标题】：The previous and next button in fancybox are interfering with the play button of a vimeo video when it is set to display as gallery

【发布时间】：2011-12-13 16:55:08

【问题描述】：

我已经尝试过调整 fancybox 样式表，但似乎无法移动上一个和下一个按钮的悬停区域，这样它就不会干扰 vimeo 视频的播放按钮。我不知道问题是否可以通过修改 javascript 文件来解决，但我真的不知道这样做。这是fancybox样式表的css代码：

#fancybox-left, #fancybox-right 
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('blank.gif');
z-index: 1102;
display: none;


#fancybox-left 
left: 0px;


#fancybox-right 
right: 0px;


#fancybox-left-ico, #fancybox-right-ico 
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
margin-top: 0px;
cursor: pointer;
z-index: 1102;
display: block;


#fancybox-left-ico 
background-image: url('fancybox.png');
background-position: -40px -30px;


#fancybox-right-ico 
background-image: url('fancybox.png');
background-position: -40px -60px;


#fancybox-left:hover, #fancybox-right:hover 
visibility: visible; /* IE6 */


#fancybox-left:hover span 
left: 20px;



#fancybox-right:hover span 
left: auto;
right: 20px;

如果有人能帮我弄清楚在使用 fancybox 时如何修改上一个和下一个按钮的悬停区域，我将不胜感激。

【参考方案1】：

您也可以像我刚才所做的那样使包含的 div 更短，这样上一个/下一个箭头悬停区域就在 Vimeo 控件上方结束

#fancybox-left, #fancybox-right 
height: 86%;

【参考方案2】：

我通过以下方式完成了这项工作：

#fancybox-left, #fancybox-right 
    width: 0%;

我把这个选择器放在我自己的样式表中，我在 Fancybox 之后加载。

【参考方案3】：

您实际上不需要弄乱原来的 fancybox css 文件。

您可以做的是将导航箭头裁剪到它们的大小，这样下一个/上一个区域就不会覆盖框两侧的整个区域。

在你链接了 fancybox css 文件后，添加这个内联 css 声明：

<style type="text/css">
 #fancybox-left,
 #fancybox-right 
  width: 30px; height: 30px; top: 45%
 

 #fancybox-left:hover span,
 #fancybox-left-ico
  left: -10px;
 

 #fancybox-right:hover span,
 #fancybox-right-ico 
  right: -10px;
  left: auto;
 
</style> 

这是为fancybox v1.3.x 准备的

【讨论】：

你知道如何在fancybox v2中使用它吗？你能帮我吗here

我试过了，在fancybox css之后添加一个新的css和链接。然后我还添加了javascript。但是下一个和上一个按钮区域还是那么大

@Mark 我以为你希望导航按钮不会阻挡视频控件jsfiddle.net/zgek0LdL

抱歉，我的问题是我有一个链接到布局的 iFrame。需要布局来显示每个数据。所以它会有下一个和上一个按钮来查看另一个数据。但是下一个和上一个按钮太大了，它们几乎覆盖了我的所有 iFrame，所以我无法编辑 iFrame 内的文本（在上一个按钮后面）