Change Lightbox Cursor Position

1

I'm using a lightbox plugin to make the lightbox effect, and I need to make some visual changes, such as the visuals of the cursors and their placements. I changed the close from him to the top and changed the colors of the arrows, now I'm trying to get them out of the picture.

LightBox: The original lightbox script

I was able to do this with the cursor next , but not with the prev. I took the float:left of the 2 cursors and in next I put a margin-left and it worked, already pro prev ( cursor to return) the margin does not solve anything, it stays in the same place.

Image of how I am seeing

HTML

<div id='lightboxOverlay' class='lightboxOverlay'>
</div>

<div id='lightbox' class='lightbox'>
    <div class='lb-dataContainer'>
        <div class='lb-data'>
            <div class='lb-closeContainer'>
                <a class='lb-close'></a>
            </div>
    </div>
</div>
<div class='lb-outerContainer'>
    <div class='lb-container'>
        <img class='lb-image' src='' />
            <div class='lb-nav'>
                <a class='lb-prev' href='' ></a>
                <a class='lb-next' href='' ></a>
            </div>
            <div class='lb-loader'>
                <a class='lb-cancel'></a>
            </div>
        </div>
    </div>
    <div class='lb-dataContainer'>
        <div class='lb-data'>
            <div class='lb-details'>
                <span class='lb-caption'></span>
                <span class='lb-number'></span>
            </div>
        </div>
    </div>

CSS

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  /*float: left;*/
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0.5;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
  margin-right: 10px !important;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  /*float: right;*/
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0.5;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
  margin-left: 44% !important;
}
    
asked by anonymous 08.09.2014 / 18:08

1 answer

2

Resolution

Finally I got the answer! ! I took the part of margin that I had done and changed the part of right and left .

Code

I'll just put what I added here.

.lb-prev, .lb-next {
    width: 50%;
    position:absolute;
    top: 0;
}

.lb-prev{
    left:-60px;
}

.lb-next {
    right:-60px;
}
    
09.09.2014 / 15:50