Lightbox mais função no iframe!

[Bacsh 4]

Olá pessoal, realmente um dúvida complicada para mim, nem sei se estou postando área correta então já peço desculpas...

 

O esquema é o seguinte, eu apliquei um código do Willian Bruno para fazer um esquema estilo iframe para a minha navegação funcionar, eu só apliquei ele para um menu em flash com a ajuda dele também e está funcionando perfeitamente...

 

Segue o código dele:

 

<script type="text/javascript">
function id( el ){
       return document.getElementById( el );
}
function pega_arq( url ){
       var file = url.split('#');
       return ( file[1] ) ? file[1]+'.html' : 'home.html';
}
function getHTTPObject(){
       if(window.XMLHttpRequest){
               return new XMLHttpRequest();
       }else if(window.ActiveXObject){
               var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
               for(var i = 0; i < prefixes.length; i++){
                       try     {
                               return new ActiveXObject(prefixes[i] + ".XMLHTTP");
                       } catch (e) {}
               }
       }
}
var xmlHttp = getHTTPObject();
function abre( arq ){
       xmlHttp.open("GET", arq,true);
       xmlHttp.onreadystatechange = function(){
               if (xmlHttp.readyState == 4){
                       id('content').innerHTML = xmlHttp.responseText;
               }               
       }
       xmlHttp.send( null );
}
window.onload = function(){
       var as = document.getElementsByTagName('b');

       for( var i=0; i<as.length; i++ ){
               as[i].onclick = function(){
                       abre( pega_arq( this.href ) );
               }
       }
       abre( pega_arq( document.location.href ) );
}
</script>

 

O código está perfeito, abre a página na minha div content perfeitamente, o problema é que eu tenho uns vídeos na página com lightbox, os arquivos para o lightbox são enormes tendo diversas engines que nem ousei mexer, mas estava funcionando perfeitamente, bastava eu adicionar os códigos no head e esses para os vídeos:

 

<a href="#exemplo" class='inline'>Lightbox</a>

 

Agora eis o problema, o código lightbox está funcionando perfeitamente, tanto do willian bruno como o do lightbox, o problema é a interação deles, sem o código do iframe o lightbox funciona, mas com o código do iframe ele só joga o #exemplo lá para cima da URL.

 

Estou praticamente o dia inteiro quebrando a cabeça com isso, resolvi pedir ajuda para o willian novamente e ele me passou esse link do seu próprio blog:

 

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

 

Ele me mandou uma mensagem assim também:

 

cara... ai o problema é um pouco mais complicado.

 

o erro não é o meu script, mas sim o comportamento das requisições ajax.

 

pois:

-> javascript carregado com ajax não funciona

-> os elementos trazidos com ajax, entraram na arvore muito depois do document.ready

 

você precisa atrelar o plugin, assim q o ajax terminar o trabalho, entendeu ?

 

meio dificil explicar, e nem rola eu atualizar o script por aqui...

apenas poste no fórum, assim outros membros podem te ajudar.

 

Realmente não saco nada de ajax e muito pouco de javascript, tanto é que achei que só alterando o código para tirar a função de pegar o href já resolveria...

 

Por favor pessoal me ajudem...

[Bacsh 4]

Opa galera, acho que estou evoluindo no problema, tentando entender os códigos do nosso amigo Willian Bruno cheguei a este código para o meu lightbox:

 

Primeiramente retirei todos os códigos da minha página de lightbox, chamada serviços.html

 

//pequei essa parte no código do willian
$(document).ready(function() 
{
	$('#content').load('servicos.html',
// servicos.html é a página que está o lightbox e content é minha div na index pela qual estou tentando abrir
		function()
	{


		//Examples of how to assign the ColorBox event to elements
		$('#gallery a').$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
		$('#gallery a').$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
		$('#gallery a').$(".inline").colorbox({inline:true, width:"50%"});

// na página servicos.html tem uma div chamada gallery com a class inline, não tenho certeza sobre essa concatenação,
// pois a na código a precisa ter um class="inline" para os textos e class="youtube" para os vídeos

		//Example of preserving a JavaScript event for inline calls.

		$('#gallery a').$("#click").click(function(){ 
// fiz uma concatenação ali em cima que também não sei se está certa
			$('#click').css({"background-color":"#f00", "color":"#fff", 
//preciso botar o $('#gallery a') ali em cima também?
"cursor":"inherit"}).text("Open this window again and this message will still be here.");
			return false;

			});

	});


	});

 

 

Leiam os comentários nos códigos, creio que estou bem perto da solução e falta pouco para funcionar, o que está ferrando é que meus hrefs além de $('#gallery a') precisam estar setados com uma classe inline e não sei se minha concatenação está correta, talvez um $('#gallery a.inline') mas também não funcionou... alguma dica?

[William Bruno 1501]

isso aqui:

 $('#gallery a').$("#click").

não faz sentido.

 

quem é o elemento com id="click" ?

 

aprenda a debugar teus scripts:

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

 

O correto, ali em cima seria:

$('#gallery a.youtube').colorbox(

ou então somente:

$('a.youtube').colorbox(

[Bacsh 4]

ok, obrigado

 

Consegui arruma os códigos só que na index ele está invalidando o seu script e está carregando em vez da home.html o servicos.html que botei nesse novo script, que é justamente o que eu não quero, não tem como botar um if (page = servicos.html) executa esse script? Mas o problema também é que ele não está passando a url lá em cima :S

 

De uma olhada diretamente no site que estou fazendo se possível:

 

Olhe como funciona na index:

 

http://www.massocenter.com.br/site/

 

E como funciona diretamente na servicos.html

 

http://www.massocenter.com.br/site/servicos.html

 

De qualquer forma eu tentei fazer de uma outra maneira, eu botei esse código arrumado dentro da servicos.html e uma div chamada #box para carrega um testemovie.html nessa div, minha intenção era só carregar esse script quando a página servicos.html estivesse aparecendo, estava crente que iria funcionar mas não foi o que ocorreu, a página index voltou a funcionar e puxou a home normalmente, cliquei no menu serviço e puxou certinho a servico.html, só que a div box não aparece nada, mas se eu abrir direto a servicos.html está lá, com lightbox funcionando e tudo.

 

Novamente o problema é a interação dos 2 scripts, os dois estão funcionando como estavam anteriormente 1 independente do outro, mas juntos não vão...

[William Bruno 1501]

isso é pq você tá chamando o .load sem nenhuma condição.

 

você deve enviar o primeiro parametro do .load() apartir do que o usuario clicar.

 

e ai, você vê se clicou no servicos ou não.

 

 

não mudar a URL, é uma caracteristica ruim do ajax. Para tentar contornar isso, é q fazemos aquele esquema com a hash #.

[Bacsh 4]

Você poderia me dar um exemplo de como fazer isso com o .load? Pois o meu menu é em flash, não sei se isso influencia também, mas é por isso que não está passando a URL lá para cima... se você der uma olhada no link que eu te passei vai verificar...

 

Obrigado :joia:

 

@edit

 

Eu achei essa ação que me serviria se meu menu não fosse em flash:

 

$(document).ready(function() {
11.
$("input[type=button]").click(function(event) {
12.
var acao = $(this).attr("value");
13.
$("#box").load('requisicao.php',{acc:acao});
14.
});
15.
});

 

$("input[type=button]").click(function(event) {

 

O problema é que justamente o meu menu não é do tipo button. :ermm:

[William Bruno 1501]

cara, ai teus links, devem ser do tipo:

 

#contato, em vez de contato.html

 

entendeu ?

Daí em diante, tanto faz se o menu é flash ou não.

 

 

 

e então, alterar a estrutura do script, fazendo uma espécie de mescla entre esse aqui com jQuery, e aquele outro meu, q você viu, q usava as hashs.

 

 

não rola eu fazer exemplos.. difícil eu separar tempo para tal. Tente fazer, e poste suas dúvidas.

Note que o teu flash, está chamando uma função abre() q não existe mais. Aperte Ctrl+Shift+J no Firefox, para ver os erros.

 

Oq você precisa, é declarar novamente essa função, e implementar ela, para usar o .load(), junto com todas as outras coisas que eu disse.

[Bacsh 4]

Caraca, me ferrei então, pois não tenho nem idéia de como começar a fazer essa união desses dois scripts, além do mais não entendi o que você quer dizer que agora todas as minhas páginas vão se chamar #teste invés de .html... eu tenho que renomear as a páginas? Além do mais ele não está passando #link lá para url ao clicar no menu em flash, desde o principio isso.

 

Enfim, não sei o que fazer, vou ter que ficar aguardando a ajuda de mais alguém já como você não pode me ajudar, engraçado é que eu não achei um exemplo disso em nenhum tutorial que eu encontrei, nem mesmo aqui no imaster, e olha que eu procurei... precisava de um exemplo mesmo do que fazer no load para solucionar isso pois refazer os scripts está fora do meu alcance sem dúvidas...

 

:ermm: :ermm: :ermm: :ermm: :ermm:

 

@edit:

 

Não aparece nenhum erro nos scripts, a função está correta, só não está fazendo o que eu quero e preciso <_<

[William Bruno 1501]

eu tenho que renomear as a páginas?

Não!

 

eu disse q o flash deve ficar assim:

getURL ("javascript:abre( '#contato' )");

e não:

getURL ("javascript:abre( 'contato.html' )");

os arquivos das páginas, continuam como estão.

 

Além do mais ele não está passando #link lá para url ao clicar no menu em flash, desde o principio isso.

isso pq a função abre() não está implementada.

 

Dentro dela, você deve fazer a chamada do .load, e enviar um document.location.href

 

 

já como você não pode me ajudar,

estou te ajudando como posso: te dizendo oq você tem que fazer.

Oque eu não posso é fazer por você.

 

 

 

Não aparece nenhum erro nos scripts, a função está correta, só não está fazendo o que eu quero e preciso <_<

clique no flash, você verá q está tentando chamar uma função abre(), q não está declarada

Não faz oq você precisa, pq você não mandou fazer oque você precisa. você precisa dizer em códigos para o interpretador js, oq você quer que seja feito.

[Bacsh 4]

Cara eu alterei para #contato no menu, então ele ta passando www.site.com.br/#site.

 

Eu não sei como implementar o function abre para passar o #site, muito menos sei como fazer uma chamada .load e enviar um document.location.href, também não entendi como funciona esse negócio de xmlHttp. Não entendi quase nada do que está na primeira parte do código, vou ter que tirar todo o conteúdo dos lightbox, retirar os vídeos e o formulário de contato que também pretendia fazer com lightbox até ter o conhecimento necessário para conseguir entender como essa droga funciona e assim poder fazer, já estou bastante irritado com isso, são praticamente 3 dias em cima e ainda não consegui fazer. Já olhei 5 vídeos aulas de Ajax com jQuery mas todos só mostram o exemplo mais simples, abrindo em uma div com conteúdo de outra página, nada complexo como estou tentando fazer, tudo que eles já mostraram já deu certo para mim, o que está faltando é a integração que certamente não vou encontrar em uma vídeo aula ou em um tutorial qualquer.

 

Essa droga simplesmente não aparece se eu abro pela index, somente se eu abri direto, olha o que fiz:

 

<script type="text/javascript">

function id( el ){
       return document.getElementById( el );
}

function pega_arqc( url ){
       var file = url.split('#');
       return ( file[1] ) ? file[1]+'.html' : 'testemovie.html';

}

function getHTTPObject(){
       if(window.XMLHttpRequest){
               return new XMLHttpRequest();
       }else if(window.ActiveXObject){
               var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
               for(var i = 0; i < prefixes.length; i++){
                       try     {
                               return new ActiveXObject(prefixes[i] + ".XMLHTTP");
                       } catch (e) {}
               }
       }
}
var xmlHttp = getHTTPObject();
function teste( arqc ){
       xmlHttp.open("GET", arqc,true);

       xmlHttp.onreadystatechange = function(){
               if (xmlHttp.readyState == 4){
               id('box').innerHTML = xmlHttp.responseText;

			$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
		$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
		$(".inline").colorbox({inline:true, width:"50%"});

		//Example of preserving a JavaScript event for inline calls.

		$("#click").click(function(){ 
			$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
			return false;

			function aviso(){
   alert('O conteúdo será carregado agora!');
}

			});	





               }               
       }
       xmlHttp.send( null );
}
window.onload = function(){
       var as = document.getElementsByTagName('a');

       for( var i=0; i<as.length; i++ ){
               as[i].onclick = function(){
                       abre( pega_arqc( this.href ) );

               }
       }
       teste( pega_arqc( document.location.href ) );
}

</script>

 

Não sei como e nem porque esse treco funcionou, eu sei que só troquei os nomes e logicamente ele iria funcionar, mas joguei o código do lightbox ali e pegou, sei lá como. Já estou quase desistindo <_<

 

PS: ele só funcionou quando abro diretamente pela página servicos.html, se abro pela index já era...