Problema ColorBox

Zorba · Julho 18, 2012

Pessoal seguinte montei um website usando jquery, e usei o colorbox pra abrir um pop-up com um slideshow, só que o problema é o seguinte ele não abre no chorme nem no IE, no firefox abre e funciona normalmente... O erro que aparece é o seguiinte: This contente failed to Load. Já verifiquei o código, tentei css clear e nada faz o trem funcionar...

Segue o código:

Página onde consta as imagens que quando clicadas abrem o pop-up com o color-box: (albuns.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="imagens/favicon.ico"/>
<link rel="stylesheet" href="css/colorbox.css" />
&lt;script type="text/javascript" src="Jquery/jquery.js"></script>
&lt;script type="text/javascript" src="Scripts/jquery.colorbox.js"></script>
<!-- ColorBox -->

&lt;script>
            $(document).ready(function(){
                //Examples of how to assign the ColorBox event to elements
                $(".group1").colorbox({rel:'group1', transition:"fade"});
                $(".group2").colorbox({rel:'group2', transition:"fade"});
                $(".group3").colorbox({rel:'group3', transition:"fade"});
                $(".group4").colorbox({rel:'group4', transition:"fade"});
                $(".group5").colorbox({rel:'group5', transition:"fade"});
                $(".group6").colorbox({rel:'group6', transition:"fade"});
                $(".group7").colorbox({rel:'group7', transition:"fade"});
                $(".group8").colorbox({rel:'group8', transition:"fade"});
                $(".group9").colorbox({rel:'group9', transition:"fade"});
            });
</script>

<!-- Google Analytics -->

&lt;script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-29537800-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
        
<!-- Menu -->

<style>
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:12px; margin:0px 20px;}
        /* menu */
        #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; }
        #menu a { color:#fff; text-decoration:none; }
        #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
        #menu > li a:hover {color:#B0D730;}
        #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
        /* sub-menus*/
        #menu ul { padding:0px; margin:0px; display:block; display:inline;}
        #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; }
        #menu li:hover ul { display:block;}
        #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px;  border-top: dotted 1px #606060; list-style-type:none; }
        #menu li ul li:first-child { border-top: none; }
        #menu li ul li a { display:block; color:#0395CC; }
        #menu li ul li a:hover { color:#7FCDFE; }
        /* main submenu */
        #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#fff; color:#000; z-index:999;}
        /* search */
        .searchContainer div { background-color:#fff; display:inline; padding:5px;}
        .searchContainer input[type="text"] {border:none;}
        .searchContainer img { vertical-align:middle;}
        /* corners*/
        #menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
        #menu .corner_inset_right { position:absolute; top:0px; left:150px;}
        #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
        #menu .corner_left { position:absolute; left:0px; top:0px;}
        #menu .corner_right { position:absolute; left:132px; top:0px;}
        #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
</style>
</head>
<body bgcolor="#333333" text="#CCCCCC" link="#FFFFFF" vlink="#990000">
<div align="center">
        <ul id="menu">
           <li class="logo">
                <a href="home.html"><img src="Imagens/menu_left.png" alt="" style="float:left;"/></a>               
            </li>
            <li><a href="home.html">Home</a>
            </li>
            <li><a href="fotos.html">Fotos</a>
            </li>
            <li><a href="albuns.html">Álbuns</a>
            </li>
            <li><a href="http://sagginfotografias.blogspot.com.br/">Blog</a>
            </li>
            <li><a href="contato.html">Contato</a>
            </li>
            <li><a href="restrita.html">Área Restrita</a>
            </li>
        </ul>
        <img style="float:left;" alt="" src="Imagens/menu_right.png"/>
    </div>
    <div style="float:none; clear:both;"></div>
<table width="100%" height="100%" border="0" align="center">
  <tr>
  <td></td>
    <td id="principal" width="80%" height="394" align="center"><div style="margin-top:10px;" align="center"><table align="center" width="800" height="541" border="0">
  <tr>
    <td align="center" height="177" width="263"><p><a class="group1" href="album1.html"><img src="Imagens/Albuns/Icones/1.jpg" width="230" height="156" /></a></p></td>
    <td rowspan="5"><img align="left" src="Imagens/linha.png" width="5" height="510" /></td>
    <td align="center" height="177" width="263"><p><a class="group2" href="album2.html"><img src="Imagens/Albuns/Icones/2.jpg" width="230" height="156" /></a></p></td>
    <td rowspan="5"><img align="left" src="Imagens/linha.png" width="5" height="510" /></td>
    <td height="177" width="263"> </td>
  </tr>
  <tr>
    <td align="center" colspan="5"><img src="Imagens/linha1.png" width="750" height="5" /></td>
  </tr>
  <tr>
    <td height="177" width="263"> </td>
    <td height="177" width="263"> </td>
    <td height="177" width="263"> </td>
  </tr>
  <tr>
    <td align="center" colspan="5"><img src="Imagens/linha1.png" width="750" height="5" /></td>
    
  </tr>
  <tr>
    <td height="177" width="263"> </td>
    <td height="177" width="263"> </td>
    <td height="177" width="263"> </td>
  </tr>
</table></div></td>
<td></td>
  </tr>
  <tr>
    <td height="47" colspan="3"><center><h5>© Saggin Fotografias  |  Todos os direitos reservados  |  Proibida a reprodução sem autorização  |  Produzido por Mateus Augusto Saggin</h5>  </center></td>
  </tr>
</table>
</body>
</html>

Páginas que são abertas usando o color box: (album1 e album2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Álbum 1</title>
&lt;script type="text/javascript" src="Jquery/jquery.js"></script>
&lt;script src="galleria/galleria-1.2.5.min.js"></script>

<!-- Galleria -->
 <style>
 /* This rule is read by Galleria to define the gallery height: */
            #galleria{ width:820px; padding:4px; height:560px;margin:0px auto;}

</style>
</head>

<body>
<div align="center" id="galleria"
    style="margin-top:10px;">
            <a href="Imagens\Fotos\1.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\1.jpg">
            </a>
            <a href="Imagens\Fotos\2.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\2.jpg">
            </a>
            <a href="Imagens\Fotos\3.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\3.jpg">
            </a>
            <a href="Imagens\Fotos\4.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\4.jpg">
            </a>
            <a href="Imagens\Fotos\5.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\5.jpg">
            </a>
            <a href="Imagens\Fotos\6.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\6.jpg">
            </a>
            <a href="Imagens\Fotos\7.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\7.jpg">
            </a>
            <a href="Imagens\Fotos\8.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\8.jpg">
            </a>
            <a href="Imagens\Fotos\9.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\9.jpg">
            </a>
            <a href="Imagens\Fotos\10.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\10.jpg">
            </a>
            <a href="Imagens\Fotos\11.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\11.jpg">
            </a>
            <a href="Imagens\Fotos\12.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\12.jpg">
            </a>
        </div>
    &lt;script>

    // Load the twelve theme
    Galleria.loadTheme('galleria/themes/twelve/galleria.twelve.min.js');

    // Initialize Galleria
    $('#galleria').galleria();

    </script>
</body>
</html>

e...............

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Álbum 1</title>
&lt;script type="text/javascript" src="Jquery/jquery.js"></script>
&lt;script src="galleria/galleria-1.2.5.min.js"></script>

<!-- Galleria -->
 <style>
 /* This rule is read by Galleria to define the gallery height: */
            #galleria{ width:820px; padding:4px; height:560px;margin:0px auto;}

</style>
</head>

<body>
<div align="center" id="galleria" style="margin-top:10px;">
            <a href="Imagens\Fotos\1.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\1.jpg">
            </a>
            <a href="Imagens\Fotos\2.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\2.jpg">
            </a>
            <a href="Imagens\Fotos\3.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\3.jpg">
            </a>
            <a href="Imagens\Fotos\4.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\4.jpg">
            </a>
            <a href="Imagens\Fotos\5.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\5.jpg">
            </a>
            <a href="Imagens\Fotos\6.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\6.jpg">
            </a>
            <a href="Imagens\Fotos\7.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\7.jpg">
            </a>
            <a href="Imagens\Fotos\8.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\8.jpg">
            </a>
            <a href="Imagens\Fotos\9.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\9.jpg">
            </a>
            <a href="Imagens\Fotos\10.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\10.jpg">
            </a>
            <a href="Imagens\Fotos\11.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\11.jpg">
            </a>
            <a href="Imagens\Fotos\12.jpg">
                <img title=""
                     alt=""
                     src="Imagens\Fotos\Miniaturas\12.jpg">
            </a>
        </div>
    &lt;script>

    // Load the twelve theme
    Galleria.loadTheme('galleria/themes/twelve/galleria.twelve.min.js');

    // Initialize Galleria
    $('#galleria').galleria();

    </script>
</body>
</html>

Editado Julho 18, 2012 por Zorba

Zorba · Julho 21, 2012

Pessoal não consegui resolver o problema do colorbox não achei nem se quer uma vírgula fora do lugar no código...

Então resolvi trocar o plugin e utilizei o fancybox, e pronto meus problemas acabaram.

Obrigado, pode fechar o tópico!

Entrar

Problema ColorBox

Pergunta

Zorba

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Zorba

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades