Pesquise

Lightbox no flash

Opa?

Acho que a maioria dos desenvolvedores web já conhecem o Lightbox. É um efeitinho super supimpa (tirando o peso) de ampliar imagens, baseado em Javascript e CSS.

Pois bem, devido ao fato de ser JS e CSS, muita gente fica na mão se deseja utilizar o recurso no Flash, contando que estejam sem tempo ou sem conhecimento, para desenvolver tal efeito 100% Flash. Aí que entra a integração que apresentarei aqui

Lightbox + Flash

Para utilizar o LightBox acionado a partir do flash, primeiro você deve fazer o de praxe como apresentado neste link(carregar os arquivos .js e .css, as imagens e etc), deixar tudo certinho como se fosse usar o LightBox normalmente, isso tudo você acerta no HTML que receberá o SWF(Flash) com a ação em questão.

Depois coloque a seguinte função JavaScript(entre as tags SCRIPT) no mesmo HTML:


JavaScript:

  1. function showFoto(src)
  2. {
  3. //criando um link falso, para o LightBox captar as informações
  4. var a_false = document.createElement("A");
  5. a_false.rel = "lightbox";
  6. a_false.href = src;
  7. //chamando a função do lightbox responsável pelo início das ações
  8. myLightbox.start(a_false);
  9. //anulando o link
  10. a_false = null;
  11. }

E no Flash, em nosso botão, chamamos na ação onRelease, o seguinte AS:

PLAIN TEXT


ACTIONSCRIPT:

  1. getURL("javascript:showFoto('MINHAFOTOAQUI.jpg');", "_self");


Agora, é só publicar, botar o SWF no html preparado e só alegria =D

Obs.: Para o efeito ficar completo, é necessário o SWF estar com fundo transparent(wmode=transparent) ou opaco(wmode=opaque), para que o lightbox não fique por trás do SWF.

[update]

Na ultima versão do LightBox, colocaram uma função para esconder os SWFs da página na hora do efeito, logo quem notar que seu SWF sumiu do fundo ao aciona-lo, já sabe o porque :S

Neste link http://www.huddletogether.com/projects/lightbox2/#download tem o changelog da versão, com as mudanças que teve.


Abracetas...

Nenhum comentário:

Postar um comentário