[Resolvido] Problema ColorBox

Mateus Augusto Saggin · 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" />
<script type="text/javascript" src="Jquery/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery.colorbox.js"></script>
<!-- ColorBox -->

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

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

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

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

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

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

André do Vale · Julho 18, 2012

Cara, analisar código assim é meio complicado, colocando um link fica mais fácil.

Use também o Inspetor de elementos do Chrome, na guia console, ou o Console de desenvolvedor do IE, na mesma guia. Ambos são semelhantes ao Firebug, e se algo está errado com script, ele lhe passará o alerta detalhado. :thumbsup:

Mateus Augusto Saggin · Julho 18, 2012

Cara, analisar código assim é meio complicado, colocando um link fica mais fácil.

Use também o Inspetor de elementos do Chrome, na guia console, ou o Console de desenvolvedor do IE, na mesma guia. Ambos são semelhantes ao Firebug, e se algo está errado com script, ele lhe passará o alerta detalhado. :thumbsup:

É realmente ficou bem complicado mesmo, no IE ele ta funcionando normalmente... Vou tentar fazer o que tu falou no chrome, e dou um retorno, se nao conseguir nada até amanhã no máximo pretendo colocar todos os arquivos no servidor e ai encaminho o link...

Editei para nao poluir o tópico:

Os erros que o inspetor do chrome me retornar seguem abaixo:

*Failed to load resource file:///C:/Users/Mateus/Dropbox/Site/P%C3%A1gina/css/images/loading.gif

*Failed to load resource file:///C:/Users/Mateus/Dropbox/Site/P%C3%A1gina/css/images/controls.png

*XMLHttpRequest cannot load file:///C:/Users/Mateus/Dropbox/Site/P%C3%A1gina/album1.html. Origin null is not allowed by Access-Control-Allow-Origin.

André do Vale · Julho 18, 2012

Dei uma corrida rápida no código. Comece corrigindo a chamada dos scripts, está com caractere em ISO ali (<script...).

Depois, valide seu código. :thumbsup:

Mateus Augusto Saggin · Julho 19, 2012

Dei uma corrida rápida no código. Comece corrigindo a chamada dos scripts, está com caractere em ISO ali (<script...).

Depois, valide seu código. :thumbsup:

No código eles estão certos, não sei porque aqui no post saiu em ISO...

Então seguinte, se eu abro a página album1.html ou album2.html no chrome elas abrem normalmente, carregam os scripts tudo certo, porém quando clico no link que abre o colorbox e dentro do pop-up seria carregado a página album1/2 os scripts não rodam e geram o erro...

Mateus Augusto Saggin · 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

Arquivado

[Resolvido] Problema ColorBox

Recommended Posts

Mateus Augusto Saggin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mateus Augusto Saggin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mateus Augusto Saggin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mateus Augusto Saggin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sound Designer

Orientação - Jav + MySql

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante