Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, estou tentando fazer com que meu site exiba no colorbox as imagens do banco de dados. Porém, ao clicar no link da imagem, o fundo da tela fica escuro como se o colorbox estivesse ativado, mas aparece apenas uma linha branca sobre o fundo preto. Coloquei nessa página os links de exemplo do colorbox e aí ele ativa normalmente e ainda exibe as fotos do banco. Como resolvo?
<?php include_once "../conexao/conexao.php";?>
<?php
$id_galeria = (int)$_GET['galeria_id'];
$pegar_dados = $pdo->prepare("SELECT `titulo` FROM `galerias` WHERE id = ?");
$pegar_dados->execute(array($id_galeria));
$fetchGaleria = $pegar_dados->fetchObject();
?><!DOCTYPE html>
<html lang="pt-br">
<head>
<title>:.Malcoln Fotografias.:</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/bootstrap-responsive.css" rel="stylesheet">
<link href="../css/estilo.css" rel="stylesheet">
<!--<script src="../js/jquery-2.0.3.min.js"></script>-->
<!--<script src="[url=[http://code.jquery.com/jquery-latest.js](http://code.jquery.com/jquery-latest.js)][http://code.jquery.com/jquery-latest.js](http://code.jquery.com/jquery-latest.js) [/url]"></script>-->
<script src="../js/bootstrap.min.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="[url=[http://html5shim.googlecode.com/svn/trunk/html5.js](http://html5shim.googlecode.com/svn/trunk/html5.js)][http://html5shim.googlecode.com/svn/trunk/html5.js](http://html5shim.googlecode.com/svn/trunk/html5.js) [/url]"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="../ico/malcoln.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="./ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="./ico/apple-touch-icon-57-precomposed.png">
<link rel="stylesheet" href="./colorbox/colorbox.css" />
<script type="text/javascript" src="./colorbox/jquery-2.0.3.min.js"></script>
<!--<script type="text/javascript" src="./colorbox/jquery.colorbox.js"></script>-->
<script type="text/javascript" src="./colorbox/jquery.colorbox-min.js"></script>
<!-- Ativando o colorbox -->
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1', width:"85%", height:"85%"});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"fade", width:"90%", height:"90%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<!--<div class="container">-->
<!-- NAVBAR
================================================== -->
<!-- Wrap the .navbar in .container to center it on the page and provide easy way to target it with .navbar-wrapper. -->
<div class="container navbar-wrapper">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="./index.php">.: Malcoln Fotografias :.</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="../index.php">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dicas<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="../qual-camera-comprar.php">Qual câmera comprar?</a></li>
<li><a href="../como-enlouquecer-um-fotografo.php">Como enlouquecer um fotógrafo</a></li>
<li class="divider"></li>
<li class="nav-header">Photoshop</li>
<li><a href="../melhorando-a-nitidez.php">Melhorando a Nitidez</a></li>
<li><a href="#">Exibindo as imagens</a></li>
</ul>
</li>
<li><a href="../o-autor.php">O Autor</a></li>
<li><a href="../o-site.php">O Site</a></li>
<li><a href="../frm_loginadm.php">Administrativo</a></li>
<li><a href="">Contato</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
<!--Início das galerias-->
<section class="container galeria">
<h2>Elastic Transition</h2>
<p><a class="group1" href="./colorbox/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="./colorbox/content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="./colorbox/content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
<ul class="inline">
<h1><?php echo $fetchGaleria->titulo;?></h1>
<?php
$pegar_imagens = $pdo->prepare("SELECT * FROM `fotos` WHERE id_ga = ?");
$pegar_imagens->execute(array($id_galeria));
if($pegar_imagens->rowCount() == 0){
echo '<div class="jumbotron">
<h1>Não existem galerias cadastradas!</h1>
</div>';
}else{
while($imagem = $pegar_imagens->fetchObject()){
?>
<li>
<div class="row">
<div class="span3">
<p><a class="group1" href="imagens/<?php echo $imagem->imagem;?>">
<img src="imagens/<?php echo $imagem->miniatura;?>" alt="" class="img-polaroid" title="<?php echo $imagem->titulo;?>"/>
</a></p>
<p><?php echo $imagem->titulo;?></p>
<p><?php echo $imagem->descricao;?></p>
</div><!--span3-->
</div><!--row-->
</li>
<?php }}?>
</ul>
<?php include("./footer.html");?>
</section><!--container-->
</div><!-- /.container -->
</body>
</html>Carregando comentários...