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.
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;
}