Lightbox + flash missão II

Olá,

Devido a grande quantidade comentários em um post sobre este mesmo assunto, resolvi dar uma revisada na técnica.

Fato que eu prefiro e utilizo em meus projetos o Shadowbox por ser muito mais completo, extensível, adaptável e ainda por cima funciona com jQuery. Se alguém quiser saber como operar Flash + Shadowbox confira aqui.

Porém neste post iremos trabalhar novamente com Lightbox, dado a quantidade de dúvidas e também por ser mais popular.

Abordarei inicialmente e como sempre com ActionScript 2.0 porém farei também em outro post como utilizar a solução em AS 3.0.

A idéia é a mesma, baixa-se o script do Lightbox, descompacte-o na pasta de seu projeto e depois é só ligar o flash ao mesmo.

O objetivo final é termos uma ação semelhante a este exemplo que disponibilizarei no final do artigo. Não abordarei, assim como no outro post, como instalar o Lightbox em sua página HTML, dado que isto está na página do script.

Mãos a obra

Um dos problemas mais relatados em comentários no artigo/post anterior é a questão de que as últimas versões do Lightbox estarem com uma ação embutida na sua execução que esconde os SWFs da página, o que para muitos esteticamente não é interessante.

É aí que entra o foco principal desta nova postagem. Eu fiz um hack em JavaScript para o Lightbox afim de evitar essa ação de esconder os SWFs o máximo possível e também facilitar a chamada de ação junto ao flash. Este script pode ser baixado aqui e deverá ser carregado junto com o seu HTML. Desde que o SWF tenha fundo(wmode) transparent ou opaque, e com excessão de versões mais antigas do FlashPlayer em ambiente linux, no restante dos sistemas operacionais e navegadores não terá problema algum com SWFs.

Além deste pequeno hack, criei uma função para auxiliar a chamada do Lightbox pelo Flash, confiram:

PLAIN TEXT

ACTIONSCRIPT:

1. 
   
   //lightBox function for call JavaScript...
2. function Lightbox(src, title)
3. {
4. if(typeof src == "string") src = [src];
5. if(typeof title == "string") title = [title];
6. if(typeof title == "undefined") title = [];
7. function addSlashes(str) { return "'" + escape(str) + "'"; }
8. if(flash.external.ExternalInterface && flash.external.ExternalInterface.available)
9. {
10. flash.external.ExternalInterface.call("Lightbox.start", src, title);
11. }
12. else
13. {
14. for(var i=0; i<src.length; i++) src[i] = addSlashes(src[i]);
15. for(var i=0; i<title.length; i++) title[i] = addSlashes(title[i]);
16. getURL("javascript:Lightbox.start([" + src.join(",") + "],[" + title.join(",") + "]);void(0);");
17. }
18. }

Com essa função podemos chamar a execução com maior facilidade, também implementei a possibilidade abrir um grupo de fotos por vez, aproveitando dos recursos de galeria do Lightbox. Coloquei a possibilidade de colocar uma legenda/title por foto. Ficou bem mais completo que a nossa primeira tentativa.

Copie a função acima e coloque dentro de seu arquivo .fla e depois basta colocar uma chamada para função Lightbox em seu objeto para que a mágica aconteça. Exemplo:

PLAIN TEXT

ACTIONSCRIPT:

1. bt1.onRelease = function()
2. {
3. Lightbox(['images/image-1.jpg', 'images/thumb-1.jpg'], ['Legend Test', 'çóh?']);
4. };

No código acima, estamos setando uma ação de clique/release a um botão chamado bt1. Ao clicar, será aberto um grupo de imagens(array de valores no primeiro argumento), com suas respectivas legendas(array de valores do segundo argumento).

Finalizando

Então é isso pessoal, creio que agora ficou redondinho. Se alguém achar algum bug ou quiser testar melhor no Internet Explorer(só dei uma testada assim por cima :P) fiquem a vontade.

Para baixar um exemplo completo de utilização junto com todos os scripts clique aqui.

Abraços!