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
December 4th, 2008 at 8:55
Olá amigo!
Olha.. eu baixei os seus arquivos e fiz tudo exatamente como você disse, porém usando a dica com AS2… mas nada funcionou… usei então um:
on (release) { getURL(”javascript:abrirSB(’img’, ‘titulo’, ‘imagem.jpg’);”); } e também não funcionou…
Tem alguma mágica ai que eu não fiz?
Poxa… o teu funciona tão certinho…
Agradeço se você puder dar um help!
December 4th, 2008 at 15:50
bem ..
Baixe o Shadowbox e importe o CSS e os JS’s no HTML do site.
não entendi essa parte.
=/
January 20th, 2009 at 12:45
Olá Maikel, onde chama no código o “shadowbox2.js”?
February 5th, 2009 at 15:08
Olá até mesmo com esse forum ainda sim não continuo entendo como funciona isso!
eu tenho um modelo pronto de light ja pronto….e naum consigo fazer essa modificação.. gostaria de saber se o tutor desse forum poderia colocar um ja pronto para download…”no meu caso precisso de um assim tem uma imagen no htm e quando alguem clicar chama um swf”..fico muito feliz se conseguir alguh asim…
e até
March 4th, 2009 at 16:37
Olá amigo!
Então… enfim a shadowbox abre no flash com transparência e tudo… mas… por mais que o link para a imagem que quero abrir esteja correta, não abre… fica carregando, carregando, carregando…
Já tentei: getURL(”javascript:abrirSB(’img’, ‘Título’, ‘imagem.jpg’);”, “_self”);
e getURL(”javascript:abrirSB(’img’, ‘Título’, ‘http://www.meusite.com.br/images/imagem.jpg’);”, “_self”);
Mas nada…
E ai? Alguma dica?
Thanks a lot!
March 20th, 2009 at 9:55
Valeu Erick, seu post e os comentários deixado aqui me ajudou muito. Especialmente o do Vinícius Freire Soares. Abraços.
Segui o padrão que o Vinícius postou, eu precisava inserir uma página html, mas usando html nao deu.. apenas troquei o parâmetro HTML por IFRAME dentro do Flash, nada mais.
March 20th, 2009 at 17:53
Hello,
I did download your example,
precissava an urgent help …
tested your example, ran straight, but I made a gallery of photos and the site did not work, all parameters used in the example Mension but not worked!
put the script in my html are all correct, but the parameter used in flash, can not be sure because his example is the. fla.
I would like to know how to work correctly?
grateful since.
hugs
March 20th, 2009 at 17:55
Olá pessoal, alguém conseguiu usar o lightbox++ pelo flash?
pois fiz uma galeria de fotos pelo flash, usei o exemplo acima, mas não funcionou, hospedei tudo certinho mas não deu certo!
q q eu fiz de errado?
alguém sabe me dizer?
valeuu….
April 4th, 2009 at 2:17
Olá Erick,
Poderia me ajudar? Eu fiz o tuto, a o shadow é executado, só que imagem abre embaixo do shadow…
Eu to chamando através do botão de um swf…..
Poderia sugerir o que pode ser?
Beijos e Obrigada!
May 5th, 2009 at 9:25
Porque quando baixo o shadowbox nao vem junto o “lib/yui-utilities.js”?? Alguém sabe me explicar?
May 7th, 2009 at 22:54
Coloquei tudo no servidor e nada… Veja o teste:
http://www.fiorecomunicacao.com.br/teste_shadow.html
May 21st, 2009 at 18:22
Opa, então como eu faria pra usar o lytebox + flash para abrir uma página HTML tipo index.htm, com barra de rolagem e tudo???
May 25th, 2009 at 10:40
Gostaria de uma ajuda , deu certo tudo, e agradeço pela oportunidade oferecida, para fazer flash + linghtbox funcionar.
Meu problema é que não consigo ver o tamanho real da imagem, como faz para abrir a imagem com tamanho original que salvei para abrir ?
atenciosamente
Lucas
June 1st, 2009 at 14:55
Se possível uma ajuda:
Para abrir UMA imagem funciona muito bem! e Como abrir uma GALERIA através do flash?
Obrigado
Wladimir
June 24th, 2009 at 17:41
Olá,
Fiz e o shadowbox abre direitinho no firefox e chrome, mas não no IE.
Alguém conseguiu fazer funcionar no IE?? como??
Valeuu
Claudia
July 7th, 2009 at 2:04
Eric, usando uma imagem ele abre de boa! Mas não abre HTML.
Alterei o AS do botão no flash:
on (release) {
getURL(”javascript:abrirSB(’html’, ‘TITULO’, ‘pagina.html’);”, “_self”);
}
E na página que estou requisitando usei a seguinte TAG no site do SB eles indicam.
Mas mesmo assim não tá abrindo!! Vc pode dar uma ajuda?? Abraço!
September 9th, 2009 at 11:21
Erick, testei aqui e ta tudo funcionando direitinho, mas como faço pra varias fotos, tipo ai quando preciona “p” e “n”, ele navegue entre elas.
Values pelo post, muito bom.
September 16th, 2009 at 18:07
estou tendo o mesmo problema para abrir HTML
a tela fica preta e nada abre, o que está errado ?? quero abrir um PHP
September 18th, 2009 at 9:14
Parabéns, não conhecia bem esta shadow box, porem gostei muito, e a interação com o flash fico muito boa, obrigado..
September 23rd, 2009 at 23:23
eu usei este AS aqui
mais nao abriu ;/
on(release){
getURL(”javascript:abrirSB(’img’ ‘Titulo’ ‘imagem.jpg’);”, “_self”)
}
November 22nd, 2009 at 4:14
Boa noite amigos,
realmente não estou conseguindo inserir o shadowbox, no meu site em flash.
acho que não estou colocando os arquivos certos ou as pastas certas no servidor.
(Baixe o Shadowbox e importe o CSS e os JS’s no HTML do site.), baixo um zip, com vários arquivos, eu coloco todos no servidor, dentra da pasta que ja veio no zip ? ou como eu faço.
desde ja agradeço.
November 23rd, 2009 at 15:02
eiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii!!!
alguém por ai ??
February 2nd, 2010 at 20:24
Oi, Antônio Carlos!
Você tem que colocar as quatro primeiras linhas de código no arquivo que você quer usar o shadowbox, no entanto, lembre-se que você tem que colocar todos os arquivos descompactados do Zip na mesma pasta desse arquivo que você quer usar o ShadowBox! Hmmm…. Fixou difícil?
Exemplo: Finja que você quer fazer uma galeria na página principal. Então você vai colocar aquelas quatro primeiras linhas de códigos lá em cima (aqui desta mesma página) dentro do arquivo de web (dentro do seu HTML). Depois coloque também os outros códigos listados na segunda caixa (também aqui). Aí dentro do seu arquivo flash você usa, como endereço para os links, aquele terceiro código desta página!
Galera, estou tendo dificuldades com o Lightbox++ no Internet Explorer (sempre ele), está dando um erro meio bizonho no meu site: http://www.tiagorocha.com.br/trabalhos/xaropetattoo
Alguém sabe como dar um jeito nisso?