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.
<link rel="stylesheet" type="text/css" href="src/css/shadowbox.css"> <script type="text/javascript" src="src/js/lib/yui-utilities.js"></script> <script type="text/javascript" src="src/js/adapter/shadowbox-yui.js"></script> <script type="text/javascript" src="src/js/shadowbox.js"></script>
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
October 26th, 2008 at 16:50
Muito obrigado pelo tutorial, consegui fazer funcionar perfeitamente.
Observei o mesmo problema que a maioria aqui teve, ao rodar o shadow no flash, o flash acaba sumindo do fundo, então dá a impressão que não tem transparência.
Eu comprovei que existe a transparência pois testei juntamente com detalhes fora da área do swf, e esses ficam transparente. E observei que o mesmo acontece no seu exemplo.
Então pergunto: Existe alguma forma de fazer com que o flash fique transparente?
Aguardo resposta, se possível também por email.
letiu@terra.com.br
October 27th, 2008 at 13:37
Oi Leandro, vi seu post estava com a mesma dificuldade para setar um tamanho para o swf, aliás estava com muitos problemas em relação ao shodownbox dentro de um swf puxando outro swf. Emfim a maneira que eu consegui adaptar foi esta:
HTML:
var openShadowbox = function(content, height, width, player, title){
Shadowbox.open({
content: content,
height: height,
width: width,
player: player,
title: title
});
};
OBS: Esta foi a forma q encontrei no http://www.mjijackson.com/shadowbox/doc/faq.html
Não consegui utilizar a forma como o Eric fez aqui no blog acabei fussando e encontrei esta
outra forma lá.
FLASH:
on (press) {
getURL(”javascript:openShadowbox(’movie.swf’, ‘600′, ‘600′, ’swf’, ‘Title’);”);
}
OBS: Deve haver uma forma dele pegar o tamanho automaticamente do stage do flash, mas por enquanto não consegui fazer isso.
October 30th, 2008 at 20:00
Olá Pessoal, estou com a mesma dificuldade exposta pelo Leandro. Sobre quando o Shadowbox é acionado o flash “desaparece” por baixo. Alguém conseguiu resolver essa dificuldade?
Segue exemplo do que estou falando.
http://www.idealeonline.com.br
Obrigado
November 3rd, 2008 at 16:29
É Fábio, ainda não consegui solução para este problema, também estou esperando que alguém tenha solucionado.
Caso achar alguma, avise.
letiu@terra.com.br
November 4th, 2008 at 14:32
Consegui fazer ficar com fundo transparente, mas sinceramente foi sem querer, e eu não sei como fazer nos meus outros sites. Até pq eu usei o lightbox neste site, talvez seja por isso, porém eu queria trocar para o shadowbox.
http://www.bambua.com.br/index555.htm >>> index de teste
Aguardando soluçao.
[]’s
November 10th, 2008 at 17:27
Olá, quero que ao clicar em cima de um botão em flash o lightbox ou o lytebox ou o shadowbox chame o link de um site qualquer como exemplo…. aguardo respostas!
November 24th, 2008 at 10:02
ola erick td bom kra.. qria saber se isso e possivel fazer abrindo um swf?
Se ja tem algo pronto deste tipo
November 25th, 2008 at 14:33
Oi Thiano, tem sim, o tipo é swf, mas precisa adaptar a função para passar as dimensões.
November 28th, 2008 at 23:45
Abaixo segue solução para não desaparecer os swf da página quando executado o Shadowbox
Trocar a linha abaixo (1413) no arquivo shadowbox.js (versao 2.0):
var hide = ['select', 'object', 'embed']; // tags to hide
por:
var hide = ['select']; // tags to hide
e adicionar wmode=”transparent” nos parametros do flash:
Testei no Firefox 2, IE7, Opera 9, Chrome e funcionou perfeitamente