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
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?
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]