left and right button show permanent

[niggel84]

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]

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]

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]

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]

"wido smith" comment is misleading from my point of view

[James Gladden]

<style type="text/css">
.fancybox-nav span {
    visibility:visible;
}
</style>

[JFK]

@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]

For fancybox v2.x and lower than v2.0.6 see
http://stackoverflow.com/a/8672001/1055987

[Jessiemar Pedrosa]

this one works for me..

thanks for the help

[Dora E. H. Crow]

@James

Thank you!  Works perfectly!

[Bethany Ravan]

Where are you supposed to paste the code?

.fancybox-nav span {

 visibility: visible;

[Dora E. H. Crow]

Hi Bethany,

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

Hope that helps!

[Dirk van der Meulen]

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: