Ir para conteúdo

POWERED BY:

Arquivado

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

webdevelopermgri

[Resolvido] Colorbox

Por , em Javascript

Recommended Posts

webdevelopermgri    0

webdevelopermgri
Postado

Olá, boa tarde a todos do fórum.

 

Preciso de uma ajuda, pesquisei no google e conversei com alguns e mesmo assim não resolvi o meu problema.

Tenho uma página que é chamada por ajax, o conteúdo é exibido perfeitamente, mas o lightbox ColorBox não funciona e sinceramente não sei o que fazer.

 

O código do Colorbox está na index.php

 

A minha página index.php tem um menu que chama a página dessa forma index.php?conteudo=indice.php, essa indice.php é essa página:

 

<?php
/*
----------------------------------------------------------------------
Arquivo .............: PHP - Página de Índices                                                  
Criado em  ..........: Outubro/2010                                     
----------------------------------------------------------------------
*/

?> 


<div id="conteudo"><?php include('inicial.php'); ?></div> 
<div id="menu"> 
 <ul> 
 	<?php do { ?>
  <li><a href="#" onClick="carrega('animais.php?id_categoria='+<?php echo $row_categorias['id_categoria']; ?>+'&id_idioma='+<?php echo $row_categorias['id_idioma']; ?>+'&detalhes='+0, 'conteudo');" ><?php echo $row_categorias['categoria']; ?></a></li>
   <?php } while ($row_categorias = mysql_fetch_assoc($categorias)); ?> 
 </ul> 
</div>

 

Ao clicar no link ele carrega a página animais.php onde eu tenho as fotos com o script do Colorbox:

 

<a rel="example1" href="imagens/animais/<?php echo $row_animaisrelaciona['caminho']; ?>" title="<?php echo $row_animaisrelaciona['nome']; ?>"><img src="imagens/animais/<?php echo $row_animaisrelaciona['caminhothumbs']; ?>" alt="" border="0" align="top" /></a>

 

Ao clicar na foto a mesma abre em uma outra página, ignorando o lightbox, lembrando que o conteúdo dessa página é carregado via ajax.

Já tentei colocar o código do Colorbox na indice.php e até na animais.php e nada.

Será que alguém poderia me ajudar com isso, claro, se isso for possível de ser acertado.

 

Valeu e fiquem na paz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara, dá uma lida nesse meu post:

http://wbruno.com.br/blog/2011/08/22/usando-lightbox-em-pagina-carregada-ajax/

Compartilhar este post

Link para o post
Compartilhar em outros sites

webdevelopermgri    0

webdevelopermgri
Postado

Bom dia a todos,

Segui a dica do William Bruno e estou tentando fazer esse lightbox funcionar, mas não entendi como implementar.

 

Alguém pode me ajudar a entender como fazer esse lightbox funcionar nessa minha página? Já fiz e refiz, mas sempre está com problema, com certeza é uma marcada minha, por isso peço ajuda para entender a implementação.

 

Se puderem eu agradeço, senão agradeço da mesma maneira.

Valeu e fiquem na paz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

mostre como você tentou aplicar a dica que dei no post.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webdevelopermgri    0

webdevelopermgri
Postado

A minha página que tem os links, que ao clicar carregam dinamicamente a página animais.php é essa, coloquei as chamas de JS e CSS nela:

 

<!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>Untitled Document</title>

   <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
	background-color: #444;
	padding: 10px;
	width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
	border: 5px solid #3e3e3e;
	border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
	border: 5px solid #fff;
	border-width: 5px 5px 20px;
	color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>	

   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
       $(document).ready(function() {  
       $('#conteudoAnimal').load('animais.php',  
           function(){  
               $('#gallery a').lightBox({fixedNavigation:true});
           }  
       );  
   });  
</script>

</head>

<body>
<div id="conteudoAnimal"><?php // include('inicial.php'); ?></div> 
<div id="menu"> 
 <ul> 
 	<?php do { ?>
  <li><a href="#" onClick="carrega('animais.php?id_categoria='+<?php echo $row_categorias['id_categoria']; ?>+'&id_idioma='+<?php echo $row_categorias['id_idioma']; ?>+'&detalhes='+0, 'conteudoAnimal');" ><?php echo $row_categorias['categoria']; ?></a></li>
   <?php } while ($row_categorias = mysql_fetch_assoc($categorias)); ?> 
 </ul> 
</div>
</body>
</html>

 

A página animais.php, que na teoria deveria mostrar o light box é essa:

 

<!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>Untitled Document</title>
</head>
<body>
<?php if ($totalRows_animais > 0) { // Mostra se não for vazio ?>
<?php if($_GET['detalhes'] == 0) { ?>
<table width="100%" border="0">
 <tr>
   <td colspan="2" class="nomeCategoria"> </td>
 </tr>
 <tr>
   <td colspan="2" class="nomeCategoria"><?php 
	if ($id_idioma == 1) 	{
	echo "<img src='imagens/familias/familia.jpg' alt='' border='0' align='top' />"	; 
	} else {
	echo "<img src='imagens/familias/family.jpg' alt='' border='0' align='top' />";	
	}
?>
   </td>
 </tr>
 <tr>
   <td colspan="2" class="nomeCategoria"><a rel="example1" href="imagens/noticias/<?php echo $row_noticias['caminho']; ?>" title="<?php echo $row_noticias['titulo']; ?>"><img src="imagens/familias/<?php echo $row_categorias['caminho']; ?>" alt="" border="0" align="top" /></a></td>
 </tr>
 <tr>
   <td colspan="2"> </td>
 </tr>
 <tr>
   <td colspan="2"><img src="imagens/animais/<?php echo $row_animais['caminho']; ?>" width="357" /></td>
 </tr>
 <tr>
   <td colspan="2"> </td>
 </tr>
 <tr>
   <td colspan="2"><div align="left"><a href="<?php echo $row_animais['url']; ?>" target="_blank" ><?php echo nl2br($row_animais['nome']); ?></a></div></td>
 </tr>
 <tr>
   <td width="96%" class="textPrincipal"><div align="left"><?php echo nl2br($row_animais['descricao']); ?></div></td>
   <td width="4%" class="textPrincipal"> </td>
 </tr>
 <tr>
   <td colspan="2" class="textPrincipal"> </td>
 </tr>
 <tr>
   <td colspan="2"><?php } // Mostra se não for vazio ?>
     <?php if ($totalRows_animaisrelaciona > 0) { // Mostra se não for vazio ?>
     <table width="246">
       <tr>
         <?php
$animaisrelaciona_endRow = 0;
$animaisrelaciona_columns = 3; // number of columns
$animaisrelaciona_hloopRow1 = 0; // first row flag
do {
$id_animais = $row_animaisrelaciona['id_animais'];
   if($animaisrelaciona_endRow == 0  && $animaisrelaciona_hloopRow1++ != 0) echo "<tr>";
  ?>
         <td width="254" valign="top"><table width="240" height="90" border="0">
             <tr>
               <td align="center">

[b]                <div id="gallery"> 
                   <a href="imagens/animais/<?php echo $row_animaisrelaciona['caminho']; ?>" title="<?php echo $row_animaisrelaciona['nome']; ?>"><img src="imagens/animais/<?php echo $row_animaisrelaciona['caminhothumbs']; ?>" alt="" border="0" align="top" /></a>
                </div>[/b]
               </td>
             </tr>
             <tr>
               <td align="center"><span class="style1"><a href="<?php echo $row_animaisrelaciona['url']; ?>" target="_blank"><?php echo $row_animaisrelaciona['nome']; ?></a></span></td>
             </tr>
             <tr>
               <td height="24" align="center" class="nomeRelacionado"><div align="left"><a href="#" onClick="carrega('animais.php?id_categoria='+<?php echo $row_categorias['id_categoria']; ?>+'&id_idioma='+<?php echo $row_categorias['id_idioma']; ?>+'&id_animais='+<?php echo $id_animais; ?>+'&detalhes='+1, 'conteudoAnimal');" > <span class="style2">
                   <?php 
		 	$descricao = $row_animaisrelaciona['descricao'];
			$limite = 100; //Edite aqui o numero de caracteres
			$descricao= substr($descricao, 0,$limite);
			echo "$descricao... <br /><br />"; 
			echo "<span class='corMais'>saiba +</span>"; 		  
		    ?>
                   </span></a></div></td>
             </tr>
           </table></td>
         <?php  $animaisrelaciona_endRow++;
if($animaisrelaciona_endRow >= $animaisrelaciona_columns) {
 ?>
       </tr>
       <?php
$animaisrelaciona_endRow = 0;
 }
} while ($row_animaisrelaciona = mysql_fetch_assoc($animaisrelaciona));
if($animaisrelaciona_endRow != 0) {
while ($animaisrelaciona_endRow < $animaisrelaciona_columns) {
   echo("<td> </td>");
   $animaisrelaciona_endRow++;
}
echo("</tr>");
}?>
     </table>
     <p>
       <?php } // Mostra se não for vazio ?>
     </p>
     <p class="centro"> </p></td>
 </tr>
</table>
<?php } ?>
<?php if($_GET['detalhes'] == 1) { ?>
<table width="72%" border="0">
 <tr>
   <td> </td>
 </tr>
 <tr>
   <td><span class="nomeCategoria"><?php echo $row_categoriasDetalhes['categoria']; ?></span></td>
 </tr>
 <tr>
   <td> </td>
 </tr>
 <tr>
   <td><img src="imagens/animais/<?php echo $row_animaisDetalhes['caminho']; ?>" width="357" /></td>
 </tr>
 <tr>
   <td> </td>
 </tr>
 <tr>
   <td><span class="style1"><a href="<?php echo $row_animaisDetalhes['url']; ?>"><?php echo $row_animaisDetalhes['nome']; ?></a></span></td>
 </tr>
 <tr>
   <td><?php echo nl2br($row_animaisDetalhes['descricao']); ?></td>
 </tr>
</table>
<?php } ?>
<p class="centro"></p>
</body>
</html>

 

Aplicar um negrito onde esta a div "GALLERY".

Foi isso que fiz.

 

Valeu e fiquem na paz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

esse seu arquivo animais.php está muito "sujo". Deixe ele somente com isso aqui:

 

<div id="gallery"> 
                   <a href="imagens/animais/imagem.jpg" title="teste"><img src="imagens/animais/imagem_menor.jpg" alt="" border="0" align="top" /></a>
                   <a href="imagens/animais/imagem2.jpg" title="teste"><img src="imagens/animais/imagem_menor2.jpg" alt="" border="0" align="top" /></a>
                </div>

sem doctype, sem php, somente isso. Assim q estiver funcionando, adicione o php para fazer a consulta ao banco de dados.

 

mas atente, q você deve gerar somente este html limpo, só a div #gallery e o conteudo dela.

outro erro do seu código atual, é que você jogou a #galery dentro do loop. Ela precisa ficar fora.

 

 

Agora pergunta: pq você tá usando ajax nisso ? não tem nenhuma necessidade.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webdevelopermgri    0

webdevelopermgri
Postado

Olá William Bruno e pessoal do fórum, bom dia.

Realmente a página estava "suja", refiz a mesma e retirei essa chamada em ajax, percebi após a sua pergunta que estava sendo "preciosismo" de minha parte, agora fiz o básico e tudo está funcionando.

Valeu pelas dicas e fiquem na paz.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito