更改 iFrame 中 FancyBox2 上一个和下一个叠加层的大小？

Question

我有一个很好的 FancyBox2 实现，可以将 iFrame 中的 html 页面加载为图库。

但是，我在 iframe 中加载的内容包含指向外部网站的链接，如果我使用允许用户滑动浏览所有图库项目的正常上一个和下一个导航，这些链接会被“阻止”。

如何更改上一个/下一个链接覆盖的大小，使它们包含在左右边距中，以便我可以向用户展示内容链接？

或

如果有一种方法可以相对于 FancyBox 的顶部而不是相对于页面的顶部来定位按钮导航栏，则另一种方法是。在这种情况下，我会禁用内部的 prev/next 链接和箭头。

Answer 1

编辑：如果你想改变上一个/下一个叠加层的大小，添加这个 CSS 内联声明 AFTER 你加载了 fancybox CSS 文件：

<style type="text/css">
.fancybox-nav {
  top: 50%;
  height: 34px;
  width: 36px;
 }
.fancybox-nav span {
  visibility: visible;
 }
.fancybox-next span {
  left: auto;
  right: 0px;
 }
.fancybox-prev span {
  left: 0px;
 }
</style>

请注意，您必须使箭头永久可见，否则访问者将不知道悬停在哪里。

注意：这是针对fancybox v2.0.6+

另一方面，您不能将按钮导航栏设置为相对于 FancyBox 的顶部，因为它有一个 position:fixed 并附加到 body 标记。

但是，您可以尝试编辑 fancybox-buttons js 文件（第 69 行+/-）并将其附加到 .fancybox-skin 选择器，然后使用 css 调整 #fancybox-buttons 选择器的位置。