[Resolvido] Fechar fancybox que carrega outra página por dentro a

[FelipeSAMA 1]

Boa noite pra quem estiver ai lendo!

 

Eu gostaria de fechar um FancyBox simplesmente clicando em um dos IDs internos.. Esse fancybox teria outro arquivo HTML por dentro.

 

Logo ao iniciar a página já abre um fancybox perguntando qual o idioma que o usuário deseja.... faço o seguinte no header

 

<script>

	jQuery(document).ready(function() {

			$.fancybox('idiom.html',
				{
					'transitionIn'	: 'elastic',
					'transitionOut'	: 'elastic',
					'padding': 0,
					'margin': 0,
					'type': 'iframe',
					'width': 200,
					'height': 208,
					'scrolling': 'no',
					'overlayColor': '#58595B',
					'overlayOpacity': 0.53,
					'opacity': true,
					'centerOnScroll': false,
					'showCloseButton': false
				}
			);	
	});

 

dai apresenta as três opções (inglês Português e Espanhol), cada um redireciona para a pagina no devido idioma.. O problema é que a página index é inglês, se eu clicar em inglês ele recarrega a página e aparece denovo o fancybox, assim por diante... por isso a necessidade de tirar o link da opção em inglês e ao invés de recarregar a mesma página apenas queria fechar o fancybox. Seria como fazer a função do X

 

eu tentei fazer o seguinte, coloquei tanto no header da página carregada quanto no header do parent:

 

$('#english').click(function(){
$.fancybox.close();
return false;
});

 

oou então

 

$('#english').click(function(){
$.fancybox.close();	
});

 

Nenhum deu certo.... Alguém sabe fazer o que eu pretendo?

 

Obrigado pela atenção!

[William Bruno 1501]

faça uma condição, para só exibir o fancy se não tiver escolhido nenhum idioma ainda.

 

qual é a url antes de escolher ?

e depois ?

 

 

com base nisso, você faz o if.

[FelipeSAMA 1]

Eu acho que intnedi

 

 

a intenção é colocar o fancy logo de cara pra escolher o idioma, mas para fazer isso que você esta dizendo precisaria de PHP pra carregar as variáveis de idioma acumuladas no fancy até outra, e depois fazer o if... nao é?

[William Bruno 1501]

sim, mais ou menos isso ai..

 

depende de como você sabe se "já foi escolhido algum idioma ou não"

dependendo de como você "souber isso", é q saberá se deve usar js ou php.

 

vá por essa linha de raciocinio.

[FelipeSAMA 1]

EU vo mudar pra PHP pra que transporte as variáveis, isso evita que a janela apareça mais vezes perguntnado qual o idioma desejado toda vez que voltar para a home... Mas ainda tem um problema.. a index será a página em inglÊs, logo, se eu utilizasse um link para a opção inglês, teria que carregar denovo a mesma página.. Isso já se torna uma perda.. Por isso voltando a pergunta de cima... queria saber como fechar o fancybox apenas clicando no ID english de dentro....

[William Bruno 1501]

faça a lógica que eu disse, é melhor doq abrir e fechar algo.

 

com oq eu disse você não abre se não precisar.

[FelipeSAMA 1]

Bom...

 

então eu tenho que pedir a sua opinião pra uma coisa... Você acha realmente válido entrar no index com 3 links diferentes, e ao clicar no english carregar a mesma página outra vez, com ausencia do fanxybox?

[William Bruno 1501]

não.

 

Na minha opinião acho isso muito "estilo anos 90"

Oq a maioria esmagadora dos sites atuais fazem, é deixar um combo no canto direito do site, para que o visitante q estiver vendo a linguagem errada possa mudar.

 

 

Motivo:

Essa abertura irrita quem não precisa dela. Pois é desnecessária.

Se eu quero ver em ingles, e o site lá atrás tá em ingles, essa abertura, ta consumindo 1 clique a mais, q eu não precisaria ter dado.

 

 

 

Se tiver dúvidas, pergunte para alguém de UX (Experiencia do Usuario).

[FelipeSAMA 1]

Concordo plenamente...

 

Então eu acho que deveria fazer o seguinte no header:

 

<script>
/* O idioma inicial já é inglês, mas atribuo um valor nulo para a variável
idiom, pois estamos supondo que o usuário ainda não tenha escolhido, com base
nisso surge o fancybox pra perguntar qual o idioma*/

	jQuery(document).ready(function() {
			var idiom = '';

			if (idiom == '') {
				$.fancybox('idiom.php',
					{
						'transitionIn'	: 'elastic',
						'transitionOut'	: 'elastic',
						'padding': 0,
						'margin': 0,
						'type': 'iframe',
						'width': 200,
						'height': 208,
						'hideOnContentClick': true,
						'hideOnOverlayClick': false,
						'scrolling': 'no',
						'overlayColor': '#58595B',
						'overlayOpacity': 0.53,
						'opacity': true,
						'centerOnScroll': false,
						'showCloseButton': false
					}
				);
			} else if ( idiom = 'english' ) {
				//Fazer nada, apenas manter o idioma
			} else if ( idiom = 'espanol' ) {
				$('#body').load('PHP/index_ES.php');
                                       //o div #body carrega a pagina em ES
			} else if ( idiom = 'portugues' ) {
				$('#body').load('PHP/index_PT.php'); 
                                       //o div #body carrega a pagina em PT
			}


	});
	</script>

 

Pra fazer isso funcionar eu teria que colocar no cabeçalho da pagina algo que fizesse funcionar as variáveis dentro de paginas diferentes, usando PHP.. estou certo?

 

Dentro do header do fancy box, arquivo idiom.php seria o seguinte

 

                  jQuery(document).ready(function() {

	         //ao selecionar o idioma desejado, fecha o fanxybox e muda a variavel idiom

		$('#english').click(function(){
			parent.$.fancybox.close();
			idiom = 'english';
		});

		$('#espanol').click(function(){
			parent.$.fancybox.close();
			idiom = 'espanol';
		});

		$('#portugues').click(function(){
			parent.$.fancybox.close();
			idiom = 'portugues';
		});

	});

 

Bom.. teoricamente se a variavel do idioma for guardada já não irá mais aparecer a janelinha, ao nao ser que o usuario clique no canto da tela para escolher denovo...

 

Tentarei aqui, qualquer coisa eu peço ajuda ^^

[FelipeSAMA 1]

Olá a todos!

 

Só um adentro, meu intuito inicial era diferente. E queria apenas usar links, que redicionariam para 2 htmls diferentes dentro do parent, e caso fosse inglês apenas fecharia o fancybox. Pois a linguagem padrão já é inglês, contudo resolvi pensar mais complexo.

 

Bom, continuando o que eu havia dito no post anterior, eu tentei mas não deu certo. Minha intenção é usar ajax na barra de idiomas e conforme o escolhido, carregaria o conteúdo correspondente no div #body.

 

Logo ao entrar no index.php aparece um fancybox que oferece 3 opções de idiomas (idiom.php) O idioma escolhido iria gerar uma variável e carregaria o conteúdo no div #body que se localiza dentro do parent (index.php)... Mas não acontece nada. Vejam se está certo

 

 

Logo no topo da index.php eu acrescento

<?php

$idiom = $_GET["idiom"]; //Aqui ele recolhe a variável idioma escolhido e transforma em php
$idiom == '';

echo '<script language="javascript"> 
var idiom=' .$idiom. ';
</script>';
?>

 

no header do idiom.php que é carregado no início

 

<script>

	jQuery(document).ready(function() {

		$('#english').click(function(){
			parent.$.fancybox.close();
			idiom = 'english';
		});
                //Por padrão a página já está em inglês, esse botão apenas encerra o fancy e grava a variaável idiom


		$('#espanol').click(function(){
			parent.$.fancybox.close();
			idiom = 'espanol';
			$('#body').load('PHP/index_ES.php');
		});


		$('#portugues').click(function(){
			parent.$.fancybox.close();
			idiom = 'portugues';
			$('#body').load('PHP/index_PT.php');
		});

	});
	</script>

 

e por ultimo, no header do index fiz o seguinte

 

<script>

	jQuery(document).ready(function() {
			var idiom = '';

			if(idiom == '') {
				$.fancybox('idiom.php',
					{
						'transitionIn'	: 'elastic',
						'transitionOut'	: 'elastic',
						'padding': 0,
						'margin': 0,
						'type': 'iframe',
						'width': 200,
						'height': 208,
						'hideOnContentClick': true,
						'hideOnOverlayClick': false,
						'scrolling': 'no',
						'overlayColor': '#58595B',
						'overlayOpacity': 0.53,
						'opacity': true,
						'centerOnScroll': false,
						'showCloseButton': false
					}
				);
			} else if( idiom = 'english' ) {
				//Fazer nada, apenas manter o idioma
			} else if( idiom = 'espanol' ) {
				$('#body').load('PHP/index_ES.php');
			} else if( idiom = 'portugues' ) {
				$('#body').load('PHP/index_PT.php');
			}


	});
	</script>

 

Quando escolho inglês, dá certo, fecha o fancy, mas não sei dizerse a variável muda para inglês. Ao clicar em qualquer outra opção, não está fazendo o load que eu pretendia...

 

Alguma luz por gentileza?

[William Bruno 1501]

para comparações, você deve usar 2 sinais de igual:

} else if( idiom == 'english' ) {

[FelipeSAMA 1]

Opa... Acabei de tentar mas não funciona... Apenas fecha o fancy mas o div #body não carrega nada, se mantém igual

[William Bruno 1501]

aperte Ctrl+Shift+J no Firefox.

 

verifique se aparecem erros. Depois debugue a requisição ajax.

Leituras:

 

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

http://wbruno.com.br/blog/2011/04/14/como-debugar-ajax-firebug/

[FelipeSAMA 1]

realmente tinha uns 30 erros, de scripts nao fechados ou entao de encoding ou doctype.

 

Mas eu corrigi todos e continua não funcionando. No validador da w3c já não aponta mais nenhum erro, só que no mozila diz o seguinte:

 

Erro: syntax error

Arquivo-fonte: http://felipeandres.com.br/Transcorp/php.php

Linha: 20, Coluna: 13

Código-fonte:

var idiom=;

 

 

 

o problema é detectado nessa parte:

<?php
$idiom == $_GET["idiom"];
?>

//no momento de transformar o variaval idiom de js pra php, o browser aponta como se var idiom estivesse vazio
<?php
echo 	'<script type="text/javascript">
		jQuery(document).ready(function() {
		var idiom=' .$idiom. ';
		});
	</script>';
?>

 

Talvez eu esteja no forum errado, e devesse perguntar no de PHP, mas enfim, se puderem me ajudar agradeçoo

[William Bruno 1501]

Deixe assim:

 

        echo '<script type="text/javascript">
                       jQuery(document).ready(function() {
                           var idiom= \''.$idiom.'\';
                       });
               </script>';

[FelipeSAMA 1]

Feito....

 

Ainda não funciona, mas pelo menos já temos algum progressso

 

O Firefox já não aponta o erro, entretanto ao clicar em outro idioma ele não carrega o conteúdo desejado...

 

Não sei o porque, talvez minha lógica esteja errada, o que acontece na verdade é que a variavel obtida no fancybox não está sendo armazenada e repassada até a index..

 

 

no final eu escrevi

 

<?php
echo '<big>seu idioma atual é'.$idiom.'</big>';
?>

 

o resultado que o browser imprimi é apenas esse:

 

 

seu idioma atual é

[William Bruno 1501]

na verdade, eu não tô entendendo bem a iteração entre php e js q você quer fazer, mas só vi agora um erro ali em cima.

 

para atribuir você deve usar apenas 1 sinal de igual

somente em comparações, é q usamos 2 sinais de igual

 

 

$idiom = $_GET["idiom"];

[FelipeSAMA 1]

a razão disso tudo é porque o javascript não é capaz de armazenar a variavel 'idiom' e passar até o index sozinho..

são duas paginas diferentes idiom.php(o fancy) e index.php

 

ao clicar em qualquer opçao de idioma do fancy, a variavel idiom ganharia um valor, com o get eu transformo essa variavel em php e repasso até a home e dependendo da opçao escolhida carrega um conteudo diferente (cada um traduzindo para o seu idioma)

 

<script type="text/javascript">
	jQuery(document).ready(function() {
		var idiom = 'none';

		if(idiom == 'none') {
                                       $.fancybox('idiom.php',
                                               {
                                                       'transitionIn'  : 'elastic',
                                                       'transitionOut' : 'elastic',
                                                       'padding': 0,
                                                       'margin': 0,
                                                       'type': 'iframe',
                                                       'width': 200,
                                                       'height': 208,
                                                       'hideOnContentClick': true,
                                                       'hideOnOverlayClick': false,
                                                       'scrolling': 'no',
                                                       'overlayColor': '#58595B',
                                                       'overlayOpacity': 0.53,
                                                       'opacity': true,
                                                       'centerOnScroll': true,
                                                       'showCloseButton': false
                                               }
                                       );
                               } else if( idiom = 'en' ) {
                                       //Fazer nada, apenas manter o idioma
                               } else if( idiom = 'es' ) {
                                       $('#body').load('PHP/index_ES.php');
                               } else if( idiom = 'pt' ) {
                                       $('#body').load('PHP/index_PT.php');
                               }


	});
</script>

[William Bruno 1501]

você deve usar 2 sinais de igual aqui:

                                } else if( idiom == 'en' ) {
                                       //Fazer nada, apenas manter o idioma
                               } else if( idiom == 'es' ) {
                                       $('#body').load('PHP/index_ES.php');
                               } else if( idiom == 'pt' ) {
                                       $('#body').load('PHP/index_PT.php');
                               }

 

você pode enviar via URL o parâmetro, e ler com js, assim não tem php no processo.

Porém se você vai carregar com ajax, usando o .load(), então não existe essa necessidade.

 

O fluxo está bem confuso.

[FelipeSAMA 1]

confuso pq? em que sentido?