Publicado em 17 de nov.

lytebox dentro de iframe

Pessoal,

Existe alguma forma desse lytebox (acho que vocês conhecem. Ele abre as imagens como zoom e com efeito) ser colocado em uma página dentro de um iframe e ao clicar na foto, a foto abrir para fora do iframe com efeito dele? Não exibir dentro de um iframe e sim sair do iframe para a janela principal?

Veja sobre o lytebox:

http://www.mariosam.com/javascript/slide-s...lytebox#more-56

Tentei de várias formas e nada! Existe ou não uma solução para isso?

Obrigado!

Marcelo

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

JunioR-CWB· 17 de nov.

Consegui executar isto com lightBox para jquery. Dá uma olhada!

As imagens copiei do site do jquery.lightbox http://leandrovieira.com/projects/jquery/lightbox/

light.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head><title>:: jQuery ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>
<script>
$(function(){
	$('iframe').load(function(){
 $(this).contents().find('body > div#gallery > ul > li a').lightBox();
	});
});
</script>
<body>

<iframe src="light-iframe.html" style="width:600px;height:300px;margin-top:10px;"></iframe>

</body>
</html>

light-iframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head><title>:: jQuery ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
</head>
<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>
<body>

<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>
 <li>
 <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
 <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
 </a>
 </li>

 <li>
 <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
 <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
 </a>
 </li>
	</ul>
</div>
</body>
</html>

marvi· 17 de nov.

Eu tinha esse que você me falou, mas dar o mesmo problema... se ele estiver dentro de uma página que está dentro de iframe o efeito aparece dentro do iframe e não fora dele, entendeu? você fez alguma modificação no seu?

JunioR-CWB· 18 de nov.

não!

veja:

http://juarez.ecomtecnologia.com.br/jquery/light

marvi· 18 de nov.

Esse efeito mesmo!

você baixou desse site mesmo? Pois aqui não funciona os efeitos do jquery... tive que mudar o diretorio pois estava diferente e parece que aqui não tem arquivos que ele pede: jquery-1.2.6.pack.js . Na minha pasta tem jquery.lightbox-0.5.pack...

marvi· 18 de nov.

Esse efeito mesmo!

Veja como está: http://www.ideiabiz.com/jquery/index.htm

marvi· 18 de nov.

Esse efeito mesmo!

Veja como está: http://www.ideiabiz.com/jquery/index.htm

marvi· 18 de nov.

Olá Junior, obrigado mesmo! Resolvi a questão!

Pensei em não ter mais jeito, mas resolvi!

Obrigado!

JunioR-CWB· 18 de nov.

faltou o jquery no cabeçalho ;)

marvi· 18 de nov.

Junior, resolvi...

Mas queria saber de uma coisa... você sabe, descobriu, onde podemos mudar o nome que fica "image 2 of 5, por exemplo, quando a gente amplia a foto? Ela fica no rodapé onde colocamos o title... Queria colocar em portugês. Imagem de 5 a 8...

marvi· 18 de nov.

Beleza, está tudo resolvido!

Obrigado! Tava procurando uma solução e já tinha deixado de lado! Mas agora resolveu!

Obrigado!