6

I have fancybox running to display blog posts in an iframe when the title is clicked from a slider. I would like to use the arrows but the default positioning of the arrows means that (in chrome at least) the buttons cover the area where the scrollbar for the blog post would be meaning that the user cannot scroll.

I would like to reposition the arrows so that they are to the left and right of the fancybox and not overlaid on the box itself although I cannot find an option for this. Can anybody help me out?

4

2 回答 2

7

主页包含有用的演示集合 - http://fancyapps.com/fancybox/#useful 看起来您正在寻找 #6 - http://jsfiddle.net/fhpZ5/

于 2012-08-13T14:17:11.647 回答
1

您可以使用 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 */
}
于 2012-08-13T13:42:23.383 回答