Geek asks and answers

Arrow location in fancybox

My fancybox works to display blog posts in an iframe when the title is clicked from the slider. I would like to use arrows, but by default the location of the arrows means that (at least in chrome) the buttons cover the area in which the scroll bar for the blog post will mean that the user cannot scroll.

I would like to move the arrows so that they are to the left and right of the fancybox and do not overlap the box, although I can not find an option for this. Can anybody help me?

+5
source share
2 answers

The homepage contains a collection of useful demos - http://fancyapps.com/fancybox/#useful Looks like you're looking for # 6 - http://jsfiddle.net/fhpZ5/

+7
source

You can use CSS to move the arrows and place them wherever you like.

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

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

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

-50pxmust pull both arrows out of bounds. You can change this to position the arrows where you want.

Update - V.2.0.3 Style label in fantasy style.
In version V2, find the following in the css sheet and modify it accordingly.
/* Around line 117 in .css file */
.fancybox-prev {
    left: 0; /* Change to -50px */
}

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

More articles:


All Articles