Flash junto ao Lightbox e Shadowbox
O Lightbox é muito popular, todos devem conhecer, é o efeito modal para abrir fotos sobre o site usando Javascript, veja aqui o efeito.
Pois bem, quando eu precisei deste efeito no Flash e Flex, escrevi uma classe Actionscript e o trabalho todo foi feito usando apenas o Flash.
Após uma mensagem do amigo Diego Tavares no fórum aqui do site sobre o uso do Lightbox e Shadowbox junto o Flash, andei pensando nessa união de JS e Flash, como eu estou acostumado a trabalhar com sites feitos completamente em Flash eu nunca senti necessidade de usar o Lightbox, mas para sites feitos parcialmente em Flash, para obter o efeito modal não temos saída, é preciso recorrer ao JS.
Eu vou mostrar aqui apenas como usar o Shadowbox, pois o Lightbox tem muitos exemplos na internet, e diferente do Shadowbox, o Lightbox abre apenas imagens.
Baixe o Shadowbox e importe o CSS e os JS's no HTML do site.
Inclua também o script abaixo no HTML, é uma função para podermos chamar no Flash.
-
<script type="text/javascript">
-
function abrirSB(type, title, url)
-
{
-
Shadowbox.init({skipSetup: true});
-
Shadowbox.open({type: type, title: title, content: url});
-
};
-
</script>
No Actionscript, no evento de click sobre a miniatura da foto coloque:
-
navigateToURL(new URLRequest("javascript:abrirSB('img', 'Título', 'imagem.jpg');"), "_self");
Como você pode ver o Shadowbox suporta formatos, o de imagem é "img", os outros formatos são: "swf", "flv", "qt" (QuickTime), "wmp" (Windows Media Player), "iframe", ou "html".
Para maiores detalhes consulte o site do Shadowbox.
Existem também o Lightbox++, uma versão melhorada do original Lightbox, se você precisa de soluções do tipo, vale conferir. É melhor que o Shadowbox e o Lightbox, pois apresenta menos bugs, e possui mais recursos.
March 26th, 2008 at 15:34
E em AS2 erick? Como ficaria?
Abraço, e parabéns pelo blog
March 27th, 2008 at 7:13
Opa, bem lembrado Kaka, é só trocar pelo getURL:
getURL("javascript:abrirSB('img', 'Título', 'imagem.jpg');", "_self");March 27th, 2008 at 10:03
Lembrando que o que diferencia o Shadowbox do Lightbox, é que nele é possível utilizar no seu efeito não apenas imagens mas também videios, swf e urls. fica ai o toque.
April 2nd, 2008 at 12:18
aki deu certo, mas n tem o efeito de transparência
April 3rd, 2008 at 9:41
Erick você teria o link ou algum material do mesmo efeito usando o lightbox?? fica ae o pedido.
April 4th, 2008 at 0:38
Segui todos os passos e… não funciona em ie… mas sim em firefox. pk?
obrigado
April 7th, 2008 at 8:52
grazie! grazie! grazie! mi hai risolto un grosso problema!!!
April 7th, 2008 at 23:29
como posso fazer para correr várias imagens (continuous) sem ter que abrir/fechar para ver seguinte/anterior?
April 8th, 2008 at 23:02
verdade o lance da transparência ! valeu, abraço
April 16th, 2008 at 22:24
no meu também não funciona, tentei usar seu código de exibir swf mas ele não quer exibir o flash de jeito nenhum…
April 23rd, 2008 at 19:07
olá pessoal. estou a fazer um site pessoal todo em flash, e gostaria imenso de emplementar o shadowbox nele. o problema é que nao encontro nada mais na net do que este (muito bom) blog, mas através das instruções do erick, não funciona..será que alguém a quem o shadowbox no flash funcionou, poderia disponibilizar o .fla ?
contactar: andreol_3@hotmail.com
obrigado
May 1st, 2008 at 12:33
Ola Pessoal…
Estou fazendo um site e nem tem uma animação em flash no topo da pag, ok !!! Ha tbm fotos que serão abertas em Lightbox V2.0 mas o efeito nao cobre a animação em flash e ja nao sei mais o que fazer !!!!! o fundo aparece bonitinho e tals mas ele nao fica po cima do flash.
Nuss nao encontrei nada na web pra resolver. Alguem pode me ajudar ?
Bjos a todos !!!
May 6th, 2008 at 10:18
Galera, postei no blog agora pouco algo que deve ajudar quem estiver com problemas, qualquer coisa comentem lá. =)
May 6th, 2008 at 10:21
A transparência na imagem eu fiz usando a classe de animação Tweener, não é do Shadowbox.
May 9th, 2008 at 15:36
Gostaria de usar Shadowbox com a galeria no flash, sabe neh mais de uma imagem no mesmo link, qual seria o comando pra fazer isso em getURL no flash?
May 22nd, 2008 at 2:32
Olá,
Uma vez que esta não é a minha língua nativa, estou usando um tradutor …
Poderia, por favor, envie o fla. arquivo para este demo ou enviá-la para mim, porque sempre que eu experimentar por mim próprio que não funciona.
getURL ( “javascript: abrirSB ( ‘img’, ‘Título’, ‘/ imagens / codbox.jpg’);”,” _self “);
Não está funcionando para mim.
June 9th, 2008 at 22:34
Olá não estou conseguindo colocar o comando… em URL…
on(release){
getURL(”javascript:abrirSB(’html’, ‘Papel de Parede’, ‘papel.html’);”, “_self”);
}
Tem algo errado? ele chega de abrir o modulo mas a pagina nao aparece fica preta. :/
June 10th, 2008 at 19:25
Boas.
Tb andava a tentar meter o shadowbox a funcionar (visto que tem aplicações que o lightbox não tem), mas tal como aqui o amigo Alexandre tb não me aparecem os conteúdos. Ele carrega , mas fica tudo a preto.
Alguma possível solução?
June 10th, 2008 at 19:33
Boas de novo….desde há bocadinho
Afinal o que estava errado era o tipo de documento…não reparei inicialmente e bastou alterar que já funciona.
As voltas que dei para uma coisa tão simples lol.
cumpz
June 10th, 2008 at 19:50
Alexandre, comigo ’html’ também não funcionou, mas utilizando ’iframe’ funcionou perfeitamente.
cumpz
June 12th, 2008 at 21:15
Ola tiago funcionou mesmo.. mas ele enche a tela, tipow nao faz o resize.. entede?
fica ai a duvida..
ABs
June 25th, 2008 at 10:13
Realmente, isso fica muito bacana, hoje em dia, para quem ja utiliza o wordpress, ja existe alguns plugins fazendo isso bem facilmente!
June 25th, 2008 at 10:23
Qual a estrutura de diretorias nesse seu exemplo porque ta fazendo o efeito aqui tween mas o shadowbox não ta funfando!
June 25th, 2008 at 10:24
qual a estrutura dos diretorias pode dizer Erick??
faz o efeito do tween mas o shadowbox não funciona aqui
July 1st, 2008 at 17:10
Tem como traduzir o Shadowbox pra português? tentei de tudo mas não tá dando certo.
Obrigado
July 2nd, 2008 at 16:30
Filipe, basta abrir o shadowbox.js e alterar para pt.
por ex:
* @var {Object} text
*/
text: {
cancel: ‘Cancelar’,
loading: ‘A carregar…’,
close: ‘Fechar’,
next: ‘Seguinte’,
prev: ‘Anterior’,
July 3rd, 2008 at 16:15
Boa tarde, no arquivo:
on (release) {
getURL(”javascript:abrirSB(’flv’, ‘titulo aqui’, ‘arquivo.flv’);”, “_self”);
}
Abre beleza no shadowbox-2.0rc1 ai vem minha pergunta. Como eu faço pra setar um tamanho no vídeo? To usando sua função postada aqui, mudei só o type: para player: devido a versão.
flw´s
July 6th, 2008 at 12:37
Amigo eu uso aqui o shadowbox mas no IE7 as animações das janelas e fades ficam muitos lentas e no seu exemplo tudo está bem suave. O que pode estar acontecendo? Pode me ajudar?
July 8th, 2008 at 12:55
N consigo consigo abrir nada com
on(release){
getURL(”javascript:abrirSB(’imgl’, ‘titulo’, ‘image.jpgl’);”, “_self”);
}
mas usando
Funciona na perfeição…. preciso de ajuda desesperadamente
July 8th, 2008 at 12:57
N consigo consigo abrir nada com
on(release){
getURL(”javascript:abrirSB(’imgl’, ‘titulo’, ‘image.jpgl’);”, “_self”);
}
mas usando (no html)
a rel=”shadowbox;options={handleOversize:’none’}” href=”image.jpg” title=”titulo”
Funciona na perfeição…. preciso de ajuda desesperadamente
July 21st, 2008 at 18:58
Não estou conseguindo colocar no HTML, como seria no iframe???
vlws
August 11th, 2008 at 18:37
Amigao estou fazendo aqui no meu trampo… o problema é… tudo funcionou… mas preciso carregar um swf… blz… ae usei o codigo:
on (release) {
getURL(”javascript:abrirSB(’swf’, ‘Título’, ‘grande3.swf’);”, “_self”);
}
Deu perfeito… so que… como faço pra nesse codigo definir o tamanho que quero que o swf abra? E como caso queira, fazer com que ele redimensione perfeitamente pq aqui ele aparece com uns 20% do tamanho que deveria.
Desde ja agradeço muito!
w3rworks@gmail.com