Problemas com colorbox

Viper33 · Janeiro 11, 2014

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 [/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 [/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>

William Bruno · Janeiro 11, 2014

Aperte Ctrl + Shift + J no Firefox e veja quais erros aparecem.

Além disso, verifique o caminho até as imagens, se ele está correto

Viper33 · Janeiro 11, 2014

Wiliam Bruno, há apenas um erro: Uncaught TypeError: undefined is not a function. E parece estar relacionado com o bootstrap.min.js:6.

Vejam aqui o problema: http://malcolnfotografias.esy.es/adm/visualizar_galeria.php?galeria_id=105

William Bruno · Janeiro 11, 2014

Ok, para testes remova o bootstrap e observe novamente.(se funciona, e se aparece alguma outra coisa no console)

Pode ter dado alguma coisa errada na minificação dele.

Viper33 · Janeiro 11, 2014

Sem o bootstrap deu o mesmo problema e no console não apareceu erro nenhum. Sobre a pergunta anterior quanto ao caminho das imagens, está correto porque nos links de exemplo ele chama as imagens.
Depois de retirar todo o bootstrap, fiz um teste retirando apenas o bootstrap.min e o problema foi o mesmo, porém sem o erro anterior acusado pelo console.

William Bruno, dei um vacilo e esqueci de copiar as imagens do colorbox (background, controles e etc). Mas mesmo assim as fotos não são carregadas. Veja: http://malcolnfotografias.esy.es/adm/visualizar_galeria.php?galeria_id=105

Viper33 · Janeiro 11, 2014

RESOLVIDO COLORBOX. Finalmente consegui resolver!!!! Havia um conflito de classes com o mesmo nome do bootstrap com o arquivo jquery.colorbox. Substitui a variavel "inline" desse arquivo por "emlinha" e funcionou direito. Agora carrega as imagens direito. Espero que essa alteração não resolva um problema e crie outro. Resultado pode ser visto aqui: http://malcolnfotografias.esy.es/adm/visualizar_galeria.php?galeria_id=105

Entrar

Arquivado

Problemas com colorbox

Recommended Posts

Viper33 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Viper33 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Viper33 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Viper33 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

printf iniciante básico

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante