ExternalInterface com JQuery

[Elektra 102]

Em versão mais antiga do Lightbox temos a função "GroupDelegate" no html. Chamo pelo AS3 com ExternalInterface e id pelo XML.

Com um pequeno ajuste no JS a tecla ESC funciona no FF, Chrome e Safari perfeitamente.

 

No Opera 12:17 e IE11 de forma incompleta, só ativa com navegação em grupo.

 

A nova tem suporte para navegadores atualizados, mas através do JQuery:

<script src="js/jquery-1.11.0.min.js"> </script>
<script src="js/lightbox.min.js"> </script>
<link href="css/lightbox.css" rel="stylesheet"/>

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption"> Image # 1 </ a>

É possível chamar pelo AS3?

[DesenvolvedorRoger 50]

Normal Elektra, basta "pegar" o método que "chama" o lightbox e chamá-lo pelo AS.

 

[]'s

[Elektra 102]

A versão que estou usando é a Lightbox++ v1.0.1 em JavaScript (2007 - codefidelity.com), sem suporte para ESC.

Consegui ativar o recurso com a sugestão do Bruno Augusto, mas não totalmente no IE e Opera.

 

Adicionei o lightbox em um scroll.swf, sem layout líquido, daí usar em JS. clique aqui

 

 

 

DesenvolvedorRoger, não há nenhum método inserido no html nesta versão do Lightbox 2.7.1 em JQuery, apenas o caminho dos arquivos e tags para as imagens, como postei acima.

 

Fui conferir o arquivo mais 'legível', sem conseguir identificar o método que dá o start ou como chamá-lo.

[cahe7cb 27]

No final do script do Lightbox:

  $(function() {
    var options  = new LightboxOptions();
    var lightbox = new Lightbox(options);
  });

Só jogar a instância no escopo global:

  $(function() {
    var options  = new LightboxOptions();
    var lightbox = new Lightbox(options);
    window.Lightbox = lightbox;
  });

Você pode criar uma função em Javascript:

function showLightbox(idx) {
	window.Lightbox.start($("a:eq("+idx+")"));
}

Então você pode chamar "showLightbox" passando o índice da imagem que você quer começar exibindo. Se o AS permitir chamar "window.Lightbox.start" diretamente fica mais fácil ainda.

[Elektra 102]

Obrigada cahe7cb

 

 

Se compreendi corretamente, substituo o trecho original para este com o escopo global.

 

A função em JavaScript adiciono no html e chamo pelo AS3 com External Interface desta forma:

ExternalInterface.call("showLightbox",full[id]); 

'id' é a variável AS3 que lê no xml qual tag data-lightbox com a imagem full será exibida.

 

 

Então, considerando a semelhança com a versão que uso (antiga), o parâmetro 'idx', da função JS, devo substituir por data-lightbox , é isso?

function showLightbox(data-lightbox) {
	window.Lightbox.start($("a:eq("+data-lightbox+")"));
}

bora testar ^_^

[cahe7cb 27]

A função em Javascript foi só um exemplo bem superficial, pois não sabia se você ia mesmo usar ela.

 

A função "Lightbox.start" pede um objeto jQuery, então é preciso formular o seletor corretamente.

 

Então qual exatamente é o valor de "full[id]"? É uma string com o valor de "data-lightbox" que está na TAG HTML? Ou não?

[Elektra 102]

Sim, preciso chamar uma função no html com ExternalInterface. É a forma do AS3 se "comunicar" com o JS (ou JQuery) .

 

 

No AS3 "full[id]" (identifica qual thumb clicado deve exibir uma imagem full, supondo que eu tenha clicado na primeira), lê no xml a tag <imgfull>'image-1'</imgfull>, que no html corresponde a tag <a href="img/image-1.jpg" data-lightbox="image-1" data-title="Cavalinho"> </ a>

[cahe7cb 27]

Então eu diria que tem ser algo como:

<script>
function showLightbox(data_lightbox) {
	window.Lightbox.start($("[data-lightbox="+data_lightbox+"]"));
}
</script>

Se não funcionar, adicione essa linha na função acima:

console.log(data_lightbox);

Dê ctrl+shift+i, vá na aba Console, e poste o que apareceu aqui.

[Elektra 102]

Obrigada, faço isso agora mesmo! Tranquilo quanto ao uso do console JS.

 

...

 

console >> após modificações

Failed to load resource: net::ERR_FILE_NOT_FOUND 

[cahe7cb 27]

Pelo AS, tem como você pegar o valor "data-lightbox" que está na tag HTML? Em uma string? Poderia ser outras propriedades também, algo que seja "passável" para o Javascript como string para usar no seletor do jQuery.

[Elektra 102]

O valor de "data-lightbox" é passado no xml, e capturado em full[id] pelo ExternalInterface ao chamar a função "showLightbox".

 

Considerando agora o click no thumb 5 (Menu Vintage), acesso a função que chama o "showLightbox" (mantive a nomenclatura do arquivo online + xml >> 'some_id_04')

ExternalInterface.call("showLightbox",full[id]); 

no xml, está o valor (recuperado por um Array/AS3)

<imgfull>'some_id_04'</imgfull>	

que irá buscar na tag html

<a href="imagens/full_5.jpg" data-lightbox="some_id_04" data-title="Menu Vintage"> </a>

[cahe7cb 27]

Só queria confirmar se o Javascript está recebendo corretamente o valor, troque a função Javascript por essa abaixo:

<script>
function showLightbox(data_lightbox) {
	alert(data_lightbox);
}
</script>

Veja qual o conteúdo da janela do "alert" que é exibida.

[Elektra 102]

Exibe o alert apenas no Wamp, recebe corretamente o valor.

 

Cliquei no thumb 3, com os ovos de páscoa, que corresponde a >> "some_id_02"

 

clique aqui

[cahe7cb 27]

Estranho... então essa versão da função deveria funcionar:

<script>
function showLightbox(data_lightbox) {
	window.Lightbox.start($("[data-lightbox="+data_lightbox+"]"));
}
</script>

Anyway, mais um teste:

<script>
function showLightbox(data_lightbox) {
	var $image = $("[data-lightbox="+data_lightbox+"]");
	alert($image.length);
	window.Lightbox.start($image);
}
</script>

Veja qual número ele alerta.

[Elektra 102]

retorna no alert >> 1

 

 

nas imagens que ainda não adicionei as tags no html, retorna >> 0

[cahe7cb 27]

Se retornar 1 ta correto e deveria funcionar, se retornar diferente de 1 ta faltando algo.

Um último debug:

<script>
function showLightbox(data_lightbox) {
	var $image = $("[data-lightbox="+data_lightbox+"]");
	try{
		window.Lightbox.start($image);
	}catch(error){
		alert(error);
	}
}
</script>

[Elektra 102]

alert:

​TypeError: Cannot read property 'start' of undefined

[cahe7cb 27]

O objeto do Lightbox não parece estar no escopo global, verifique se você fez tudo certo como eu disse no Post#4.

 

No script do Lightbox, na versão dele descompactada, procure pelo primeiro bloco de código que tem no post e substitua pelo segundo.

[Elektra 102]

Isso está ok desde o Post#4. >> clique aqui

[cahe7cb 27]

Então não sei dizer onde pode estar o erro, o último HTML que eu usei pra testes foi esse e funciona bem aqui, só que no caso eu chamo a função pelo console do navegador.