left and right button show permanent

18589 views
Skip to first unread message

niggel84

unread,
Feb 18, 2010, 4:52:54 AM2/18/10
to fancybox
hi,

how can I fade in right and left button constantly? they should be
always indicated, not only with mouse over effect.

thx 4 help

JFK

unread,
Feb 19, 2010, 10:42:14 PM2/19/10
to fancybox
try this (after you have loaded your fancybox css file) to override
the buttons/arrows style

<style type="text/css">
#fancybox-left-ico {
left: 20px;
}
#fancybox-right-ico {
right: 20px;
left: auto;
}
</style>

wido smith

unread,
Mar 20, 2012, 12:53:24 PM3/20/12
to fanc...@googlegroups.com

Isn't necessary add any style on html page, simply, delete left: -9999px; from #fancybox-left-ico, #fancybox-right-ico declaration.

#fancybox-left-ico, #fancybox-right-ico {

       position: absolute;

       top: 50%;

       left: -9999px;<---------------------

       width: 30px;

       height: 30px;

       margin-top: -15px;

       cursor: pointer;

       z-index: 1102;

       display: block;

iluvpinkerton

unread,
May 16, 2012, 1:18:18 PM5/16/12
to fanc...@googlegroups.com
When I remove that line from the stylesheet the arrows no longer line up correctly for every photo. Also, when I hover on the left or right, the arrows show/hide.

Any way to avoid that?

JFK

unread,
May 16, 2012, 1:38:21 PM5/16/12
to fancybox
"wido smith" comment is misleading from my point of view

James Gladden

unread,
Jul 16, 2012, 12:47:11 PM7/16/12
to fanc...@googlegroups.com
<style type="text/css">
.fancybox-nav span {
    visibility:visible;
}
</style>

JFK

unread,
Jul 16, 2012, 7:46:23 PM7/16/12
to fanc...@googlegroups.com
@James Gladden:

Your solution works for fancybox v2.0.6+ only (wouldn't work for v2.0.5 or lower)
Most of the comments in this thread were written as a workaround for fancybox v1.3.x

JFK

unread,
Jul 16, 2012, 7:47:35 PM7/16/12
to fanc...@googlegroups.com
For fancybox v2.x and lower than v2.0.6 see
http://stackoverflow.com/a/8672001/1055987

Jessiemar Pedrosa

unread,
Nov 21, 2012, 1:42:33 AM11/21/12
to fanc...@googlegroups.com
this one works for me..
thanks for the help

Dora E. H. Crow

unread,
Apr 16, 2014, 2:17:48 PM4/16/14
to fanc...@googlegroups.com
@James

Thank you!  Works perfectly!


Bethany Ravan

unread,
Apr 22, 2014, 2:41:33 PM4/22/14
to fanc...@googlegroups.com
Where are you supposed to paste the code?

.fancybox-nav span {
 visibility: visible;

Dora E. H. Crow

unread,
May 8, 2014, 10:51:33 AM5/8/14
to fanc...@googlegroups.com
Hi Bethany,

I pasted the code at the bottom of the fancybox.css file.

Hope that helps!


Dirk van der Meulen

unread,
Sep 11, 2015, 9:09:41 AM9/11/15
to FancyBox
For the matter anybody is still looking or Googling:

Look for the CSS file jquery.fancybox-1.3.4.css

Replace this code:
#fancybox-left-ico, #fancybox-right-ico {
    position
: absolute;
    top
: 50%;
    left
: -9999px;

    width
: 30px;
    height
: 30px;
    margin
-top: -15px;
    cursor
: pointer;
    z
-index: 1102;
    display
: block;
}




For:
#fancybox-left-ico {
    position
: absolute;
    top
: 50%;
    left
: 10px;  
    width
: 30px;

    height
: 30px;
    margin
-top: -15px;
    cursor
: pointer;
    z
-index: 1102;
    display
: block;

}

#fancybox-right-ico {
    position
: absolute;
    top
: 50%;

    right
: 10px;

    width
: 30px;
    height
: 30px;
    margin
-top: -15px;
    cursor
: pointer;
    z
-index: 1102;
    display
: block;

}




And out comment this:
#fancybox-left:hover span {
    left
: 20px;
}

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



Op donderdag 18 februari 2010 10:52:54 UTC+1 schreef niggel84:
Reply all
Reply to author
Forward
0 new messages