How to change lightbox2 arrows position of this plugin?

Question

Im working with Lightbox2 plugin http://lokeshdhakar.com/projects/lightbox2/. I need:

1. always show nav arrows
2. arrows show on left and right side of browser, like float: left, right (not on image)
3. close button show on browser top right position

Please help me, how to do that options. Thank you

Answer 1

To always show the nav arrows, you will have to change their opacity to 1 (it is 0 by default).

Here:

.lb-nav a.lb-prev, .lb-nav a.lb-next {
  opacity: 1;
}

Then to keep them on the side of the browser window you can change change the position property to fixed and then change the individual arrows accordingly, like this:

.lb-nav a.lb-next {
  position: fixed;
  right: 0;
  top: 0;
}
.lb-nav a.lb-prev {
  position: fixed;
  left: 0;
  top: 0;
}

and finally you can move the entire bottom block by messing around with the positioning like this:

.lb-dataContainer {
  left: 50%;
  position: absolute;
  top: -45px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

Keep in mind, these solutions are far from perfect. This is a quick and dirty way to move elements around.