Publicado em 18 de jul.

[Resolvido] Problema ColorBox

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" />
<script type="text/javascript" src="Jquery/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery.colorbox.js"></script>

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

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

<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>
<script type="text/javascript" src="Jquery/jquery.js"></script>
<script src="galleria/galleria-1.2.5.min.js"></script>

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

 <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>
<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>
<script type="text/javascript" src="Jquery/jquery.js"></script>
<script src="galleria/galleria-1.2.5.min.js"></script>

<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>
<script>

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

// Initialize Galleria

$('#galleria').galleria();

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

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...