在iFrame中更改FancyBox2上一页和下一页叠加层的大小?

时间:2012-07-16 18:51:26

标签: jquery fancybox fancybox-2

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

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

如何更改prev / next链接覆盖的大小,使其包含在左右边距中,以便我可以将内容链接公开给用户?

OR

另一种方法是,如果有一种方法可以将按钮导航栏相对于FancyBox的顶部而不是相对于页面顶部进行定位。在这种情况下,我将禁用内部上一个/下一个链接和箭头。

1 个答案:

答案 0 :(得分:0)

编辑:如果您想更改prev / next叠加层的大小,请添加此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选择器的位置