Aos solicitantes, depois de algumas pesquisas, segue o tutorial.
HTML principal, chamamos aqui de light.html
<script language="JavaScript" type="text/javascript" src="jquery/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
</head>
<body>
<iframe src="light-iframe.html" style="width:600px;height:300px;margin-top:10px;"></iframe>
</body>
</html>
HTML do iframe, light-iframe.html
<style> /* jQuery lightBox plugin - Gallery style */ #gallery { background-color: #444; padding: 10px; width: 520px; } #gallery ul { list-style: none; } #gallery ul li { display: inline; } #gallery ul img { border: 5px solid #3e3e3e; border-width: 5px 5px 20px; } #gallery ul a:hover img { border: 5px solid #fff; border-width: 5px 5px 20px; color: #fff; } #gallery ul a:hover { color: #fff; } </style> <div id="gallery"> <ul> <li> <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();"> <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"> <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"> <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> </a> </li> </ul> </div>
Neste iframe, assim como no site do lightbox, apenas um css para formatar as listas com imagens.
JAVASCRIPT do light.html
$(function(){ $('iframe').load(function(){ $(this).contents().find('div#gallery > ul > li a').lightBox(); }); });
Não tem segredo, adicionamos um load na tag do iframe, pegamos o conteúdo via contents() e com seletor simples aplicamos o plugin lightbox
[s]
JunioR
Tentei varias e varias vezes, infelizlemnte não funcionaou como explicado acima, seria muito interessante dar um link pra ver em funcionamento pois até agora parece um FAKE este post cheio de BUG
Calma Mateus,
Gostaria muito de ajudar nesta solução. Tem como vc me passar tua estrutura (HTML)?
Veja o POST “FAKE BUGADO” funcionando:
http://juarez.ecomtecnologia.com.br/jquery/light.html
Testado no IE7, FF3, CHROME,OPERA
🙂
[s]
Olá Juarez eu estou tentando usar a sua técnica para rodar com o prettyPhoto ele é feito com a mesma base do lightbox jquery: http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
Eu estou tentando usar ele para rodar videos, o problema é que eu color:
…$(this).contents().find(‘div.works > ul > li a’).prettyPhoto();
ele funciona mas eu preciso colocar .prettyPhoto[gallery1] para rodar a galeria.
Como faco para passar esta informacao [gallery1] no html ele esta:
rel=”prettyPhoto[gallery1]”
Obrigado
Juarez , Obrigado pela ajuda de fato o tuto acima está funcionando !
valeu pela ajuda!
Seria possivel vc me passar seu e-mail ?
mbernardo@evermedia.com.br
Abraços
Amigos, poderia me dar uma ajuda estou com um problema semelhante, carrego a pagina em uma div com jquery ate ai tudo bem, e tal pagina deveria ficar com o efeito do lightbox, no qual nao fica, ficando somente se este for carregado fora da div….
Obrigado a todos!
Tem um link onde eu possa ver?
Boa tarde amigo,
Este conceito funciona para frame também? pois tentei e não obtive sucesso.
obrigado!
Veja que o iframe faz parte do conteúdo do document. Já o frame cria uma camada para trabalhar com um document. Você pode até mostar alguma coisa, mas sempre será sob uma camada.
[s]
Muito bom eu gostei! só q! estou com um problema! e quando vc faz um IFRAME, aí dentro deste IFRAME contém outro Iframe com a galeleria de fotos…
ele não vai carregar na página inteira como no seu exemplo, ele careega dentro do 1º IFRAME só… :S
tem algum modo de resolver isso??
:S
Troque esta linha:
$(this).contents().find(‘div#gallery > ul > li a’).lightBox();
por isto:
$(‘iframe’,this).contents().find(‘div#gallery > ul > li a’).lightBox();
Não testei, mas é esta a hierarquia
[s]
Não funcionou assim não…ele abre e fika dentro do iframe, mas sem o lightbox….sabe só a imagem com o zoom….e n da pra fechar…aí tem que clicar no link novamente….
coloquei desta forma:
$(function(){
$(’iframe’).load(function(){
$(’iframe’,this).contents().find(’div#gallery > ul > li a’).lightBox();
});
});
Ops! Faltou o load do outro iframe
$(function(){
$(’iframe’).load(function(){
$(’iframe’,this).load(function(){
$(this).contents().find(’div#gallery > ul > li a’).lightBox();
});
});
});
Tenta lá!
[s]
Acho q estou com probleminha pra me adptar! HAHAHHAA
será que você tem MSN???
🙂
Testei agora, veja o fonte do link
http://juarez.ecomtecnologia.com.br/jquery/light
[s]
Peço desculpa, no post anterior era este o código
$(function(){
$(’iframe’).load(function(){
$(’iframe’,this).load(function(){
$(this).contents().find(’div#gallery > ul > li a’).lightBox();
});
});
});
e não este
$(function(){
$(’iframe’).load(function(){
$(’iframe’,this).contents().find(’div#gallery > ul > li a’).lightBox();
});
});
Veja este exemplo via jsbin, esta nos comentários anteriores. http://jsbin.com/elena4/2
Não ajudou.
O que eu quero é o seguinte:
Tenho uma página html (light) que tem um iframe (if1). Dentro do iframe (if1) está outra página html (light2) que tem outro iframe (if2). E por fim, dentro desse iframe (if2) está a página html (light3) que tem as imagens . E o que eu quero é que a janela pop-up com as imagens apareça fora de todos os iframes e não dentro do primeiro iframe (if2).
Envie-lhe um exemplo para o e-mail, para o caso de não ter percebido a minha dúvida.
fiquei feliz quando vi aquele ‘problema’ virar esse artigo. Juarez sempre mandando mt bem ^^. Parabéns!
Abraço, man!
Velho parabéns pelo blog! Show de bola mesmo!
Cara, passei horas testando e não conseguindo, copiei os códigos, refiz caminhos, salvei a tua pagina de exemplo, exibindo toda vez no IE 8… IE 8… IE 8… qndo me deu a luz de testar no Firefox (3.0)… funcionou… é triste essa vida de desenvolvedor no meio de briga de Egos…
A Pergunta é, tem solução? Algum hack conhecido ou algo assim?
Edenilson,
Cara fiz testes no ie7 e ie8, ambos funcionaram
Você fez com 2 iframes, no meu caso so tem um, tentei passar pra um mas não está dando…
http://juarez.ecomtecnologia.com.br/jquery/light2.html
[s]
funciona sem ser em ul e li?
Muito abrangente esta pergunta. Na verdade funciona de qualquer maneira, desde que vc respeite o conceito do plugin.
[s]
Amigo, estou com um problema.
Preciso organizar os thumbs em tabelas e precisei tirar os “ul” e “li” para formatação nas tabelas, porém não esta funcionando.
Outra coisa, também esta rolando incompatibilidade com navegadores, como posso resolber estes problemas.
Obrigado.
Veja este exemplo, estou usando tabela ao invés de ul
http://juarez.ecomtecnologia.com.br/jquery/light3.html
[s]
Excelente tabalho.
Por razões que não posso mudar, preciso fazer que a “chamada” do lightBox seja feita de dentro do iframe que conterá a galeria (o plugin estará na página principal se necessário, mas o melhor – em meu caso – é que o própro plugin estaja tb no iframe). Então pensei que poderia fazer que o próprio iframe fizesse um “load” na página principal executando a função que você escreveu. Falei algo muito estípido?
Pode me dar uma orientação?
Creio que esta funcionalidade é do pai para o filho. Não vejo razão da galeria receber os scripts, uma vez que será acessada pelo pai. A não ser que o contexto de apresentação seja alterado, mas isto implica na alteração do fonte.
Fiz um pequeno exemplo, veja:
http://juarez.ecomtecnologia.com.br/jquery/light_iframe.html
Tem problemas com altura e largura. Testei apenas no FF
[s]
Júnior este site foi a salvação, mas não estou conseguindo reproduzir no meu site. Eu até tentei copiar seu código direto para a pasta do jquery-lightbox-0.5 e mesmo assim não faz o que parece tão fácil no seu exemplo. No meu ele abre dentro do iframe. Me dá uma luz…
Tem algum link onde eu possa ver?
Essa dica me foi muito útil. Gostaria de recompensá-lo de alguma forma.
Procurei algum ícone DONATE mas não encontrei. Seria legal se tivesse essa opção aqui em seu blog.
Tenho certeza que muitos developers colaborariam. Eu sou um deles.
Raffaello,
Obrigado pelas considerações. Fico feliz, mais uma vez, pela ajuda que o post te ofereceu.
Precisando de ajuda, estou a disposição.
[s]
E aee grande Juarez so podia ser tu mesmo pra desenvolver essa saida pra quem usa o iframe parabens mesmo …. uma pena foi o forum do jQuery ter sido abandonado pois quem manjava la mesmo era tu heheheh lembro da mao q tu me deu aquela vez com o meu site isso uma mao lava a outra blza cara aparece no msn para trocar umas ideias as vezes . Abraçao ai e sucesso !!!
Bom dia Juarez, Poderia me ajudar com o site que estou desenvolvendo, pois não estou conseguindo fazer com que as imagens abram fora do iframe.
Segue endereço:
http://www.sparus.com.br\buffet
ao entrar em buffet há as imgens para serem abertas.
desde ja agradeço.
Denis,
Primeira coisa é trocar o prototype pelo jQuery.
Este post foi feito com jquery. No teu caso basta seguir os passos do post.
Qualquer problema me avise.
[s]
Boa Tarde…
Troquei tudo, fazendo identico ao post, apenas alterando as imagens e não consegui.
http://www.sparus.com.br\galeria1
Poderia dar uma olhada?
Desde ja agradeço e muito.
a biblioteca do jquery não foi carregada, pelo menos isto que percebi.
[s]
problema q fica essa marca (tipo contorno) do iframe, tem como tirar isso?
sobre as cores blue nao funciona no IE?
Basta aplicar um css na tag iframe.
[s]
Juarez, parabéns pelo tuto mas infelizmente não estou conseguindo…
tem como vc disponibilizar um exemplo para eu copiar o codigo fonte??
os links que vc postou acima estão quebrados…
obrigado
Ola Juarez,
Tem como me ajudar? Estou atrasado com um projeto e não consigo resolver essa questão. O lightbox abre dentro do iframe e também não centraliza na página.
Site:
galeriadospaes.com.br/2010
Entrar no link “Encomendas” digita o email rafael@lafbrasil.com e da um enter.
Então é só clicar na imagem e ver o que acontece.
Desde já agradeço sua ajuda,
Obrigado,,
Só não consigo entrar no site. O chrome esta detectando malware
http://safebrowsing.clients.google.com/safebrowsing/diagnostic?site=http://galeriadospaes.com.br/2010&client=googlechrome&hl=pt-BR
[s]
Então man, ele tem esse alerta mesmo… mais não tem malware não, pode confiar.
Entra pelo IE que rola! 😉
Blz, vou dar uma olhada. Mas pelo IE jamais!!!!
Valeu!
Cara muito bom seu tuto…salvou minha vida já faz dias que estou atras deste script e agora funcionando perfeitamente Valew..C
Que bom, qualquer dúvida post um comentário. Ou me siga pelo twitter @juareznjunior
Bom dia!
Sua dica me ajudou muito , porém no chrome não funcionou e no IE 8 a máscara não ocupou toda a tela.
http://jsbin.com/elena4/2
Com relação ao IE, é um problema do plugin. Acho que foi desenvolvido antes do IE8. No 7 fucionava.
[s]
Estou precisando fazer um lightbox q chame um iframe no flash…
voce poderia me dar uma luz, ja tentei de mtas maneiras e nao consegui…
abrass
iframe no flash? Não seria um iframe com flash? Qual a finalidade?
[s]
nao precisa ser um iframe, mas sim um lightbox que de pra editar um texto…
A finalidade é pra exibir uma lista de preço…
e o menu q leva até essa lista é em flash…
entao procuro uma maneira de chamar um lightbox com iframe, ou um lightbox com texto…
Obrigado…
nenhuma resposta ainda??
Tente o jquery ui dialog. O uso é simples, basta o flash acessar uma função qualquer no javascript.
Brother!
Sempre achei esse assunto de manipular content de ifram com jquery meio vago e lendo seu post tive uma luz! rs
Obrigado e parabéns!
Achei um que funciona que é uma beleza! http://dolem.com/lytebox/