Ir para conteúdo

POWERED BY:

Arquivado

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

João Loureiro

Animação em fotos não funciona, qndo carregadas com ajax

Por , em Javascript

Recommended Posts

João Loureiro    0

João Loureiro
Postado

Amigos,

 

Estou precisando de uma ajudinha, fiz uma pagina em php com funcoes ajax via innerHTML, e na funcao que abre as miniaturas é a mesma que abre a apresentacao que é com js, ela escurece a tela e tudo mais abrindo fora do ajax, como uma pagina separada e quando coloca ela é aberta no site principal via AJAX simplesmente a animacao do slideshow nao aparece... Já fiz inumeros testes....

Pelo que eu estou vendo o problema é com a abertura da TAG <a class="photo-link" ... O AJAX deve ter outra funcao para abrir este comando.

 

estou postando a funcao que abre o arquivo Slideshow.php e tambem estou postando o codigo que abre as miniaturas e faz a animacao. Alias bem interessante esse Slideshow programei para automaticamente usar todas as imagens de uma determinada pasta no servidor, eliminando toda a trabalheira de configurar, se alguem tiver interesse, me contate que eu forneço....

 

Segue ai o codigo da funcao:

function loadensaio()
{
var xmlhttpe;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttpe=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttpe=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttpe.onreadystatechange=function()
 {
 if (xmlhttpe.readyState==4 && xmlhttpe.status==200)
   {
   document.getElementById("page-wrap").innerHTML=xmlhttpe.responseText;
   }
 }
xmlhttpe.open("GET","auto/slideshow.php",true);
xmlhttpe.send();
}

Slideshow.php:

<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.0.0.js"></script>

<script type="text/javascript">

	$(function(){

		$(".photo-link").fancybox({ 'zoomSpeedIn': 500, 'zoomSpeedOut': 500, 'overlayShow': true }); 

	});

</script>
</head>

<body>

<div id="page-wrap">



<?php

	/* settings */
	$image_dir = 'images/';
	$per_column = 6;


	/* primeiro passo: leitura dos arquivos no diretorio(MINIATURAS tem que estar (NOME DA FOTO)-thumb.jpg */
	if ($handle = opendir($image_dir)) {
		while (false !== ($file = readdir($handle))) 
		{
			if ($file != '.' && $file != '..') 
			{
				if(strstr($file,'-thumb'))
				{
					$files[] = $file;
				}
			}
		}
		closedir($handle);
	}

	/* Segundo passo, montar as miniaturas e criar os links para abertura da animacao */
	if(count($files))
	{
		foreach($files as $file)
		{
			$count++;
			echo '<a class="photo-link" rel="one-big-group" href="',$image_dir,str_replace('-thumb','',$file),'"><img src="',$image_dir,$file,'" width="100" height="100" /></a>';
			if($count % $per_column == 0) { echo '<div class="clear"></div>'; }
		}
	}
	else
	{
		echo '<p>Sem fotos na galleria.</p>';
	}

?>

</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

2 problemas:

-> javascript carregado com ajax não funciona

-> o elemento nao existe no momento do window.onload, portanto o evento não foi atrelado a ele.

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Loureiro    0

João Loureiro
Postado

Na verdade o JS está abrindo ele... ele abre as miniaturas, mais quando clica nas miniatuas as fotos se abrem direto sem animacao! parece que nao está funcionando o script, mais eu testo separado e ele funciona normal....

 

Amigos,

Estou a uns 3 dias tentando resolver esse problema com abertura do AJAX e não consigo.... tenho uma galeria de fotos que funciona perfeitamente abrindo sem ajax... ou seja abre as miniaturas e quanse se clica nas miniaturas tem uma animacao que abre a foto selecionada...modelo: http://everestco.orgfree.com/AJAX/sajax/'>http://everestco.orgfree.com/AJAX/sajax/

 

Dai tenho uma pagina que quando se clica em um bottao, em ajax teria que abrir as miniaturas(ABRE NORMAL) e quando se clica nas miniaturas, tem que abrir a imagem maior com a animacao... porem, não está acontecendo com animacao, abre a foto no endereco... modelo com ajax: http://everestco.orgfree.com/AJAX

 

eu acho que deve ser alguma coisa bem besta!!! mais eu ja tentei tirar a tag head e body do gall.php e mais um monte de outras coisas... mais nao vai ... to ficando maluco ja com isso...

a minha funcao para mudar a tag:

function loadajax()
{
var xmlhttpe;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttpe=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttpe=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttpe.onreadystatechange=function()
 {
 if (xmlhttpe.readyState==4 && xmlhttpe.status==200)
   {
   document.getElementById("page-wrap").innerHTML=xmlhttpe.responseText;
   }
 }
xmlhttpe.open("GET","gall.php",true);
xmlhttpe.send();
}

o index.php:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Pagina inicial teste AJAX</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="resources/fancy.css" />

<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.0.0.js"></script>
   <script type="text/javascript" src="js/jonny.js"></script>

<script type="text/javascript">

	$(function(){

		$(".photo-link").fancybox({ 'zoomSpeedIn': 500, 'zoomSpeedOut': 500, 'overlayShow': true }); 

	});

</script>
</head>

<body>
<button type="button" onClick="loadajax()">TESTE AJAX</button>


<div  class="photo-link">
<script type="text/javascript">

	$(function(){

		$(".photo-link").fancybox({ 'zoomSpeedIn': 500, 'zoomSpeedOut': 500, 'overlayShow': true }); 

	});

</script>
<div id="page-wrap">

Pagina Inicial

</div></div>

</body>

</html>

 

o arquivo gall.php

<body>
<link rel="stylesheet" type="text/css" href="resources/fancy.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<div id="page-wrap" class="photo-link">
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.0.0.js"></script>
   <script type="text/javascript">

	$(function(){

		$(".photo-link").fancybox({ 'zoomSpeedIn': 500, 'zoomSpeedOut': 500, 'overlayShow': true }); 

	});

</script>
   <font="#FFFFFF">
<h1>GALERIA AUTOMATICA TESTE AJAX</h1><br />

<?php


	$image_dir = 'images/';
	$per_column = 6;



	if ($handle = opendir($image_dir)) {
		while (false !== ($file = readdir($handle))) 
		{
			if ($file != '.' && $file != '..') 
			{
				if(strstr($file,'-thumb'))
				{
					$files[] = $file;
				}
			}
		}
		closedir($handle);
	}


	if(count($files))
	{
		foreach($files as $file)
		{
			$count++;
			echo '<a class="photo-link" rel="one-big-group" href="',$image_dir,str_replace('-thumb','',$file),'"><img src="',$image_dir,$file,'" width="100" height="100" /></a>';
			if($count % $per_column == 0) { echo '<div class="clear"></div>'; }
		}
	}
	else
	{
		echo '<p>Sem fotos na galeria.</p>';
	}

?>
</div>
   </body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

-> javascript carregado com ajax não funciona

não traga nenhuma tag scritp com ajax, já deixe tudo na página que está previvamente carregada.

tanto as libs, qnto os scripts.

 

-> elementos trazidos com ajax, não terão os eventos atrelados, pq o momento do document.ready ja passou

veja sobre o método .live()

 

ainda assim, é possível que você não consiga resolver, pois para atrelar os eventos, é bem provavel que você tenha que mexer no core do plugin das imagens.

 

Edit: Não duplique a mesma dúvida pelo fórum. Mesclei teus tópicos

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Loureiro    0

João Loureiro
Postado

William,

 

Obrigado pela atenção! na verdade eu repeti o script no ajax, para eliminar o problema. Como eu faço para montar esse metodo live()? Voce pode me dar uma mão cara? ou então uma outra ideia para eu montar essa galeria com ajax neste site!?

 

Mais uma vez obrigado pela atencão!!!! desculpa ter feito outro topico, mais na vdd eu re fiz o codigo de uma maneira mais clara e achei que o titulo estava meio confuso!

 

Abracosss

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
Como eu faço para montar esse metodo live()?

olhando na documentação:

http://api.jquery.com/live/

 

 

Voce pode me dar uma mão cara? ou então uma outra ideia para eu montar essa galeria com ajax neste site!?

já estou te ajudando.

Te disse o motivo de não ter funcionado, e te apontei as soluções e saídas.

Mais do que isso, só se você contratar alguém pra fazer por ti.

 

Eu pessoalmente não faria carregamento de conteudo com ajax. Não acho 'correto', e gera vários outros problemas, além dos que você já está enfrentando.

 

na vdd eu re fiz o codigo de uma maneira mais clara e achei que o titulo estava meio confuso!

bastava voltar ao topico e informar as mudanças. Ajude a manter o forum organizado.

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