Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Viper33

Problemas com colorbox

Recommended Posts

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.