Arrow positioning in fancybox

Question

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?

Answer 1

Homepage contains collection of useful demos - http://fancyapps.com/fancybox/#useful Looks like you are looking for #6 - http://jsfiddle.net/fhpZ5/

Answer 2

You can use CSS to reposition the arrows and place them where you like.

Open the fancybox css file (jquery.fancybox-1.3.4.css) and around line 145 you should find the following css styles. Change the left and right position from the default (0) to position where you want the arrow to be shown.

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

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

The -50px should pull both arrows just outside the box. You can change this to position the arrows where you like.

---

Update - V.2.0.3 Fancy box style sheet.
In the V2 version, look for the following in the css sheet and change it like above accordingly.

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

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