lightbox erro (imagem abre ao fundo)
Fala galera, sou novo aqui mais quem sabe alguém pode me ajuda, estou programando um site aqui e esta dando um erro na lightbox, ela esta abrindo ao fundo. (imagem em anexo)
alem de esta abrindo ao fundo do background ela esta grande demais
segue o código usado:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Supermercado Marinho</title>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="vendor/css/style.css" />
<link href="path/to/lightbox.css" rel="stylesheet">
<style type="text/css">
.galeria img{
width: 50%;
padding: 15px;
}
.galeria img:hover{
cursor: pointer;
}
/*estilo do bg*/
.bg{
position: absolute;
background-color: #333;
opacity: 0;
top: 0px;
left: 0px;
display: none;
height: 100%;
width: 100%;
}
.lb{
position: relative;
top: 10%;
left: 25%;
display: none;
border:10px solid #fff;
box-shadow: 2px 2px 12px #333;
background:#fff;
text-align: center;
.lb
{z-index: 1000;}
}
.lb img{
opacity: 0;
width: 100%;
height: 100%;
}
/*botão fechar*/
.close{
color: #fff;
background-color: #000;
width: 20px;
height: 15px;
text-align: center;
position: absolute;
right: -5px;
bottom: -20px;
padding: 0 auto;
}
.close:hover{
cursor: pointer;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Baumans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">
<body>
<div id="container" class="container">
<div id="page" class="container-fluid">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="vendor/images/logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right">
<li><a href="empresa.html">EMPRESA</a></li>
<li><a href="ofertas.html">OFERTAS</a></li>
<li><a href="fotos.html">FOTOS</a></li>
<li><a href="receitas.html">RECEITAS</a></li>
<li><a href="contato.html">CONTATO</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.galeria img').click(function(){
$('.bg').animate({'opacity':'0.60'}, 500, 'linear');
$('.bg, .lb').css('display','block');
var big = $(this).attr('src');
$('.lb img').attr('src', big);
$('.lb img').animate({'opacity':'1.00'},1500, 'linear');
});
$('.close').click(function(){
$('.lb img').css('opacity','0');
$('.bg, .lb').css('display','none');
});
});
</script>
</head>
<section>
<div class="galeria">
<img src="vendor/images/ENCARTE_204.jpg"div=""style="width: 450px;height: 550px;">
<img src="vendor/images/ENCARTE_(2).jpg" div=""style="width: 450px;height: 550px;">
<img src="vendor/images/ENCARTE_(3).jpg" div=""style="width: 450px;height: 550px;">
<img src="vendor/images/ENCARTE_4).jpg" div=""style="width: 450px;height: 550px;">
</div>
</section>
</div>
<div class = "bg"></div>
<!--box de imagens-->
<div class="lb">
<img src=""/>
<div class="close">FECHAR</div>
</div>
<div id="footer" class="container-fluid">
<div style="height:35%; width: 100%; display: inline-block;"></div>
<div id="footerContent">
<div class="footerItem col-md-2 col-xs-6">
<h4>LOJAS FÍSICAS</h4>
<ul>
<li><a href="">Sobre o Marinho</a></li>
<li><a href="">Missão e Valores</a></li>
<li><a href="">Código de Ética</a></li>
<li><a href="">RH - Trabalhe Conosco</a></li>
<li><a href="">Concessões</a></li>
<li><a href="">Ofertas</a></li>
<li><a href="">Sustentabilidade</a></li>
<li><a href="">Imprensa</a></li>
</ul>
</div>
<div class="footerItem col-md-3 col-xs-6">
<h4>MARINHO FEST 11</h4>
<ul><p>
<li><a href="">Conheça o Programa</a></li>
<li><a href="">Parceiros</a></li>
<li><a href="">Cupom</a></li>
<li><a href="">Lojas</a></li>
<li><a href="">Regulamento</a></li>
<li><a href="">Perguntas Frequentes</a></li>
<li><a href="">Contato</a></li></p>
</ul>
</div>
<div class="footerItem col-md-3">
<h4>ATENDIMENTO</h4>
<p>Nosso horário de atendimento é das 8 as 20h, de segunda a sábado.</p>
<h2>32 3741-2809</h2>
<p>Matriz</p>
<h2>32 3741-2345</h2>
<p>Filial</p>
</div>
<div class="footerItem col-md-4">
<h4>SIGA-NOS NAS REDES SOCIAIS.</h4>
<ul>
<li><a href=""><img src="vendor/images/faceIco.png" /> Fique por dentro das novidades. </a></li>
<li><a href=""><img src="vendor/images/instaico.png" /> Conheça nossos produtos.</a></li>
<li><a href=""><img src="vendor/images/youtubeico.png" /> Acompanhe nosso canal.</a></li>
<li><a href=""><img src="vendor/images/twiterico.png" /> Fale com a gente.</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="vendor/bootstrap/js/jquery-3.2.1.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/bootstrap/js/npm.js"></script>
<script src="path/to/lightbox.js"></script>
</body>
</html>
Discussão (0)
Carregando comentários...