3

Im using Lightbox 2 http://lokeshdhakar.com/projects/lightbox2/

What i want is when Lightbox 2 is oppened it always shows the nav buttons. I tried to look on CSS but theresnt any display:none in the elements .lb-nav, .lb-prev, .lb-next in fact theres a display:block on .lb-prev, .lb-next.. I think i have to change something on the javascript but i dont know what.. can someone help me?

Ramon Vasconcelos
  • 947
  • 3
  • 14
  • 31

5 Answers5

2

Lightbox uses a simple CSS image swap. Apply styles from the :hover pseudo-classes with this, somewhere after lightbox.css:

.lb-next {
    background: url("../images/next.png") no-repeat scroll right 48% transparent;
}
.lb-prev {
    background: url("../images/prev.png") no-repeat scroll left 48% transparent;
}

https://addons.mozilla.org/en-US/firefox/addon/firebug/

https://developers.google.com/chrome-developer-tools/docs/overview

isherwood
  • 58,414
  • 16
  • 114
  • 157
2

you can also set navigation to true in the javascript file. Also you can add this to the page in which you wish the effect to take place

$('a.StockNumber').lightBox({
    fixedNavigation: true
});
Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
  • I use lightbox regularly and this is how i do it. Look for the word navigation in the lightbox.js, its near the beginning, and set it to true. – Kevin Lynch Apr 03 '13 at 20:40
1

In lightbox.js, line 329, change

var alwaysShowNav = false;

to

var alwaysShowNav = true;

Alison
  • 11
  • 1
1

On lightbox 2 this worked for me:

.lb-nav a.lb-next,
.lb-nav a.lb-prev{
  opacity:1;
}
stefan
  • 2,685
  • 2
  • 24
  • 31
0

It worked fine when I used the css code bellow.

<style>
.lb-nav a.lb-next,
.lb-nav a.lb-prev{
opacity: 0.4 !important;
}

.lb-nav a.lb-next:hover,
.lb-nav a.lb-prev:hover{
opacity: 0.8 !important;
}
</style>

In this code "!important" must be included. Without that your purpose will not be served

Mamun Ahmed
  • 1
  • 3