0
When I open the image in the lightbox, and I scroll down the page, it looks like this:
Can someone help me?
my code is as follows:
html:
<div class="mtlsr-images-for-lightbox">
<ul>
<li>
<a href="images/1.jpg">
<img src="images/1.jpg" alt="" /> </a> </li>
<li>
<a href="images/2.jpg">
<img src="images/2.jpg" alt="" />
</a>
</li>
<li>
<a href="images/3.jpg">
<img src="images/3.jpg" alt="" />
</a>
</li>
<li>
<a href="images/4.jpg">
<img src="images/4.jpg" alt="" />
</a>
</li>
<li>
<a href="images/5.jpg">
<img src="images/5.jpg" alt="" />
</a>
</li>
</ul>
</div>
CSS:
.mtlsr-lightbox{display:none;position:absolute;width:100%;height:100%;z-index:99999999999999;top:0;}
.mtlsr-lightbox .image-in-lightbox{max-width:700px;width:100%;position:absolute;z-index:999;top:10%; margin-left: auto;margin-right: auto;left: 0;right: 0;}
.close, .next, .prev{position:absolute;z-index:9999;}
.close{position:absolute;right:20px;top:20px}
.next, .prev{top:50%}
.next{right:20px;}
.prev{left:20px;}
.mtlsr-images-for-lightbox{max-width:600px;margin:0 auto;overflow:hidden}
.mtlsr-images-for-lightbox ul li{float:left;display:inline;width:30%;margin:1%;padding:1%;background-color:#fff;border-top:2px solid #598dca}
.mtlsr-images-for-lightbox ul li a img{width:100%;height:auto;}
.mtlsr-lightbox{
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=1 ); /* IE6-8 */
}
.mtlsr-lightbox .image-in-lightbox{
border-radius:5px
}
.close, .next, .prev{color:#666;font-size:30px;text-decoration:none;}
.next, .prev{color:#aaa;font-size:80px;}
.close:hover, .next:hover, .prev:hover{color:#fff;}
js:
$(document).ready(function() {
var current = '.mtlsr-images-for-lightbox ul li.current';
//Função para verificar a posição atual da imagem e remover as setas(prev e next) conforme necessário
function check_image_position(){
if ($(current).is(':last-child')) {
$('.next').hide();
$('.prev').show();
}else if ($(current).is(':first-child')) {
$('.next').show();
$('.prev').hide();
}else{
$('.next, .prev').show();
}
}
$('.mtlsr-images-for-lightbox ul li').on('click', 'a', function(event) {
event.preventDefault();
var big_image_href = $(this).attr('href');
$(this).parent().addClass('current');
$('.mtlsr-lightbox').fadeIn();
$('.mtlsr-lightbox').append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
check_image_position();
});
//Fechar
$('.mtlsr-lightbox').on('click', '.close', function(event) {
$('.mtlsr-lightbox').fadeOut();
$('.mtlsr-lightbox .image-in-lightbox').remove();
$(current).removeClass('current');
});
//Função Next e Prev
$('.mtlsr-lightbox a').on('click', function(e){
if($(this).attr('class')=='next'){
var big_image_href = $(current).next().find('a').attr('href');
$(current).next().addClass('current');
$(current).prev().removeClass('current');
}else if($(this).attr('class')=='prev'){
var big_image_href = $(current).prev().find('a').attr('href');
$(current).prev().addClass('current');
$(current).next().removeClass('current');
}
check_image_position();
$('.mtlsr-lightbox .image-in-lightbox').remove();
$('.mtlsr-lightbox').append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
});
});
Puts
overflow: hidden
in its Father element of the Lightbox.– Diego Souza