ExternalInterface com JQuery

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

[]'s

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.

No final do script do Lightbox:

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

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

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

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 ^_^

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?

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>

Então eu diria que tem ser algo como:

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

console.log(data_lightbox);
Dê ctrl+shift+i, vá na aba Console, e poste o que apareceu aqui.

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

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.

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>

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>

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

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

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

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

retorna no alert >> 1

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

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>

alert:

​TypeError: Cannot read property 'start' of undefined

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.

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

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.

Observe que o desenvolvedor informa:

2. Olhe dentro do js pasta para encontrar jquery-1.11.0.min.js e lightbox.min.js e carregar ambos os arquivos. Carregar jQuery primeiro.

<script src="js/jquery-1.11.0.min.js"> </ script>
<script src="js/lightbox.min.js"> </ script> // --------------- ORIGINAL

3. Olhe dentro do css pasta para encontrar lightbox.css e carregá-lo.

<link href="css/lightbox.css" rel="stylesheet" />

 E você chama:

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

Já havia tentado também incluir no html a chamada a "lightbox.js", carregou as imagens, mas ficou bugado.

Agora, após sua postagem, ao remover "js/lightbox.min.js" e chamar "js/lightbox.js", carrega as imagens, mas sem overlay e navegação com as setas. clique aqui

Ou seja, as imagens estão sendo chamadas corretamente, mas ainda sem o acesso completo.

Na versão em JS (antiga), para acesso em grupo as imagens (navegação com setas) chamamos a função GroupDelegate, para acesso individual era outra. Preciso do acesso em grupo.

Sim na página diz isso, mas se a modificação do Post#4 foi feita no "lightbox.js" pela lógica teríamos que incluir ele no lugar do outro, correto? De toda maneira é possível modificar o "lightbox.min.js" também, só que como ele tá compactado é um pouco mais complexo o search e replace.

Continuando...

Ao que parece, na nova versão o que determina os grupos das imagens é a propriedade "data-lightbox", como no teste todas tem um valor diferente o plugin assume que todas são de um grupo diferente com apenas 1 só imagem e não exibe as setas.

Como agora todas as imagens vão ter um "data-lightbox" igual, é necessário um outro parâmetro pra diferenciar por qual delas você quer começar exibindo. Tem duas opções, adicionar uma outra propriedade na tag das imagens como "data-lightbox-id" ou especificar qual imagem pela ordem dela como: 1, 2 ou 3... qual desses fica mais fácil de chamar pelo AS?

Mas o alert exibiu um valor diferente para data-lightbox de cada imagem clicada, ou seja, idem a versão antiga. Mesmo que o data-lighbox fosse "igual", e exibisse apenas 1 imagem sem as setas, o overlay estaria presente.

Não haverá uma ordem para as imagens, pode começar por qualquer uma, essa é a finalidade de ter um scroll.

Agradeço muito pela sua disposição em auxiliar, mas vou manter a versão antiga mesmo do lightbox. O ESC só não pega no IE e Opera o resto tá beleza.

Grande abraço