Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

marvi

lytebox dentro de iframe

Por , em Javascript

Recommended Posts

marvi    0

marvi
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

JunioR-CWB    0

JunioR-CWB
Postado

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">
<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">
<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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

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...

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

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...

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

Beleza, está tudo resolvido!

 

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

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito