Always show navigation arrows - jquery.fancybox-1.3.1.css

1,336 views
Skip to first unread message

Playscape

unread,
Sep 6, 2012, 7:25:47 PM9/6/12
to fanc...@googlegroups.com
Hello,

I would always show my navigation arrows.
I make the changes following the instructions on this topic : https://groups.google.com/forum/?hl=en&fromgroups=#!topic/fancybox/7mhSkl9j3Ls
It doesn't works very well for me. 

The left arrow appears, it's ok.
But the right arrow appears in the middle when I'm out of the picture,
then, when I enter on the picture, the right arrow move to the right side.

Could somebody help me please to fix the right arrow on the side ?

I have attached a screen capture.
Here is my css :

#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background-image: url('blank.gif');
z-index: 1102;
display: block;
}

#fancybox-left {
left: 0px;
}

#fancybox-right {
right: 0px;
}

#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
width: 30px;
height: 30px;
margin-top: -15px;
cursor: pointer;
z-index: 1102;
display: block;
}

#fancybox-left-ico {
left: 20px;
background: transparent url('fancy_nav_left.png')no-repeat;
}

#fancybox-right-ico {
right: 20px;
background: transparent url('fancy_nav_right.png')no-repeat;
}

#fancybox-left:hover, #fancybox-right:hover {
/*visibility: visible;*/    /* IE6 */
}

#fancybox-left:hover span {
/*left: 20px;*/ 
}

#fancybox-right:hover span {
left: auto;
/*right: 20px;*/ 
}


Thanks
screen arrow.jpg

JFK

unread,
Sep 6, 2012, 8:58:27 PM9/6/12
to fanc...@googlegroups.com
have you checked  https://groups.google.com/group/fancybox/browse_thread/thread/1fd7617349b1e882/  ?
Message has been deleted

Playscape

unread,
Sep 7, 2012, 6:27:08 AM9/7/12
to fanc...@googlegroups.com
Thank you JFK, I followed your advice.

I subsitute:  left: -9999px by /*left: 20px;*/ 
On this declaration :  #fancybox-left-ico, #fancybox-right-ico {

Then to have the arrows at same distance on each side, I change this declarations like this :

#fancybox-left-ico {
left: 19px;
background: transparent url('fancy_nav_left.png')no-repeat;
}

#fancybox-right-ico {
right: 0px;
background: transparent url('fancy_nav_right.png')no-repeat;
}

Here is the final css :

#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
/*left: 20px;*/
width: 30px;
height: 30px;
margin-top: -15px;
cursor: pointer;
z-index: 1102;
display: block;
}

#fancybox-left-ico {
left: 19px;
background: transparent url('fancy_nav_left.png')no-repeat;
}

#fancybox-right-ico {
right: 0px;
background: transparent url('fancy_nav_right.png')no-repeat;
}

#fancybox-left:hover, #fancybox-right:hover {
/*visibility: visible;*/    /* IE6 */
}

#fancybox-left:hover span {
/*left: 20px;*/ 
}

#fancybox-right:hover span {
left: auto;
/*right: 20px;*/ 
}

Thank you JFK, thank you Google ! ;)
Reply all
Reply to author
Forward
0 new messages