Fancybox中的箭头定位

Question

我使用fancybox在一个iframe中显示博客文章，当从滑块中点击标题时。我想使用箭头，但是箭头的默认位置意味着（至少在chrome中），按钮覆盖了博客文章的滚动条所在的区域，这意味着用户无法滚动。

我想重新定位箭头，使它们位于fancybox的左侧和右侧，而不是重叠在框本身上，尽管我找不到此选项。有人能帮帮我吗？

- Alex Sadler

Answer 1

首页包含一系列有用的演示 - http://fancyapps.com/fancybox/#useful 看起来你正在寻找#6 - http://jsfiddle.net/fhpZ5/

- Janis

Answer 2

您可以使用CSS重新定位箭头并将其放置在所需位置。

打开fancybox css文件（jquery.fancybox-1.3.4.css），在第145行左右，您应该找到以下CSS样式。将左侧和右侧位置从默认值（0）更改为您想要显示箭头的位置。

/* Line 145 (ish) of the fancybox css sheet */
#fancybox-left {
    left: -50px; /* Default: 0 */
}

#fancybox-right {
    right: -50px; /* Default: 0 */
}

-50px应该将两个箭头拉到盒子外面。您可以更改此位置以放置箭头。

---

更新 - V.2.0.3 炫酷的框样式表。
在V2版本中，请查找CSS表中的以下内容，并相应地进行更改。

/* Around line 117 in .css file */
.fancybox-prev {
    left: 0; /* Change to -50px */
}

.fancybox-next {
    right: 0; /* Change to -50px */
}

- Anil

---

这些在v2.0.6样式表中不存在。 - Alex Sadler

我已经更新了我的答案，请查看 v 2.0.3 css 中的第117行。 - Anil

你可以把 CSS 样式放到你自己的 CSS 表中，然后使用 !important 覆盖 fancy box 样式。 - Anil