Ir para conteúdo

POWERED BY:

Arquivado

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

Bruno_Ferreira

[Resolvido] Light box

Por , em Javascript

Recommended Posts

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Olá Pessoal,

 

Diante de vários posts referente a fazer um Ligthbox, resolví postar esse script bem simples para explicar mais ou menos como fazer.

Pra quem não sabe, Ligthbox (ou darkbox, janela modal, etc) consiste em uma janela que aparece no meio da tela do navegador sobre o conteúdo da página, impossibilitando que o usuário clique em qualquer coisa que não seja essa janela. Mais ou menos como esse site quando você clica na guitarra: http://aserenata.com.br/produtos/produto_detalhe.php?id=849.

 

muito bem, antes de mais nada, a ligth box consiste no seguinte:

  • Body do documento, conteúdo principal que ficará em primeiro plano (z-index 1);
  • Uma camada, geralmente um div que ficará em segundo plano com uma imagem geralmente semi transparente, "tampando" tudo o que está em primeiro plano;
  • A janela modal, ou seja, a janela que ficará flutuando sobre o conteúdo.
O segundo plano e a janela ficam ocultos, e aparecem diante de um evento, por exemplo ao clicar em uma imagem para ampliar.

 

Então vamos aos códigos:

 

Primeiro a pagina html. Note que a segunda e terceira camadas estão no código, mas conforme o CSS que veremos mais abaixo eles se mantém ocultos.

 

<html>
	<head>
		<title>Lightbox</title>
	</head>
	<body class="base">
		Conteúdo da página em primeiro plano, esse conteúdo fica inacessível ao mostrar a janela modal<br>
		<input type="button" name="mostrar" value="mostrar" onclick="java script:mostra();"/>
				
				<!-- Esse div é o que ficará tampando o conteúdo principal-->
		<div name="plano2" class="plano2" id="plano2">
		</div>

				<!-- Esse é o div da janela modal, que aparecerá sobre toda a página-->
		<div name="plano3" class="plano3" id="plano3">
			Texto sobre a janela modal, note que esse conteúdo é normalmente acessível ao usuário.
			<br/>
			<input type="button" name="esconder" value="esconder" onclick="java script:esconde();"/>
		</div>
	</body>
</html>

Agora o CSS, ele define os divs como ocultos e posiciona a janela modal assim como as imagens e outras coisas

/*estilo do body, ou seja, o primeiro plano*/
				body{
			z-index:2;
		}
				/*plano 2, ou seja, o "tampão" que cobrirá o body*/
		.plano2{
			position: absolute;
			top: 0px;
			left: 0px;
			visibility: hidden;
			background: url("back.png") repeat-y;
			background-color: transparent;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
				/*aqui é a janela que ficará sobre todos os outros elementos*/
		.plano3{
			visibility: hidden;
			background: #FFFFFF;
			position: absolute;
			top: 50%;
			left: 50%;
			height: 400px;
			width: 600px;
			margin-top: -200px;
			margin-left: -300px;
			text-align: center;
			padding: 5 5 5 5px;
			border-style: solid;
			border-width: 5px;
			border-color: #1E679A;
			z-index: 3;
		}

É utilizado a propriedade z-index para posicionar os elementos um em cima do outro.

Além disso, a imagem citada acima, back.png, normalmente é uma imagem semitransparente, que pode ser montada em quase todos os aplicativos de desenho, como Corel Draw, Corel PhotoPaint, Photoshop, Inkscape, etc (Dica: esse último é gratuito pra baixar). no meu caso utilizo uma imagem de 1 X 1024 pixels, repetindo-a por todo o eixo y.

Note que a propriedade visibility do plano 2 e 3 estão como hidden, escondido, eles só serão exibidos com essa função java script:

 

//função para mostrar os elementos de 2º e 3º plano
						function mostra(){
				document.getElementById('plano2').style.visibility="visible";
				document.getElementById('plano3').style.visibility="visible";
			}

						//função para esconder os elementos de 2º e 3º plano
			function esconde(){
				document.getElementById('plano2').style.visibility="hidden";
				document.getElementById('plano3').style.visibility="hidden";
			}

As funções fazem nada mais nada menos que alterar os estilos dos elementos, tornando-os visíveis e invisíveis denovo.

 

 

 

 

Então a idéia básica é isso galera, vocês podem sofisticar mais isso usando uma imagem para abrir a janela modal ampliando-a por exemplo. Isso vai da curiosidade de cada um.

 

Testei essa página em mozilla Firefox 3 e IE7 e funcionaram perfeitamente.

 

Não se esqueçam de deixar seus comentários e dúvidas, inclusive se funfou em outros navegadores ou não.

 

Abraços!!! Até a próxima!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Putz cara! ahuhauhau

fiquei aqui me debatendo com o teu script.... quase fiz outro...

e ele só não funciona pq você usou errado o comentário no CSS... 

/* estilo do body, ou seja, o primeiro plano */
				body{
			z-index:2;
		}
Enfim, não é como Javascript, php, Java, C... que você pode usar as duas barras // para comentário de uma linha... prefira sempre em CSS usar o /* comentário */

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Valeu William,

 

Desculpa pelo vacilo, como tinha pegado de uma página que fiz pra um site, não tinha comentários,e comentei na edição do tópico e me esqueci desse detalhe, mas agora já está corigido.

 

Valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

cauetc    0

cauetc
Postado

cara, nao consegui fazer funcionar, acho q eh a peça q fica entre o teclado e o banco sabe?! da uma mao ai...

 

 

css.css:

/* estilo do body, ou seja, o primeiro plano */
body{
	z-index:2;
}

/* plano 2, ou seja, o "tampão" que cobrirá o body */
.plano2{
 position: absolute;
 top: 0px;
 left: 0px;
 visibility: hidden;
 background: url("back.png") repeat-y;
 background-color: transparent;
 width: 100%;
 height: 100%;
 z-index: 1;
}

/* aqui é a janela que ficará sobre todos os outros elementos */
.plano3{
 visibility: hidden;
 background: #FFFFFF;
 position: absolute;
 top: 50%;
 left: 50%;
 height: 400px;
 width: 600px;
 margin-top: -200px;
 margin-left: -300px;
 text-align: center;
 padding: 5 5 5 5px;
 border-style: solid;
 border-width: 5px;
 border-color: #1E679A;
 z-index: 3;
}

 

 

lightbox.html

<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
<title>Lightbox</title>
</head>
<body class="base">



  Conteúdo da página em primeiro plano, esse conteúdo fica inacessível ao mostrar a janela modal<br>
  
<input type="button" name="mostrar" value="mostrar" onclick="java script:mostra();"/>

				
  <!-- Esse div é o que ficará tampando o conteúdo principal-->
  <div name="plano2" class="plano2" id="plano2"></div>

  <!-- Esse é o div da janela modal, que aparecerá sobre toda a página-->
  <div name="plano3" class="plano3" id="plano3">
	 Texto sobre a janela modal, note que esse conteúdo é normalmente acessível ao usuário.
	 <br/>
	 <img src="http://l.yimg.com/a/i/us/pim/dclient/k2/img/md5/f34b76c8a0839e2f6cd5bc584082e989_1.gif" onClick="java script:esconde();"/>
  </div>
<script language="JavaScript">
  <!--
  //função para mostrar os elementos de 2º e 3º plano
  function mostra(){
	document.getElementById('plano2').style.visibility="visible";
	document.getElementById('plano3').style.visibility="visible";
  }

  //função para esconder os elementos de 2º e 3º plano
  function esconde(){
	document.getElementById('plano2').style.visibility="hidden";
	document.getElementById('plano3').style.visibility="hidden";
  }
  //-->
</script>


</body>
</html>

 

tenho outra duvida.... caso eu quizesse botar esse java script separadamente em um arquivo js( é essa a extencao neh?), como ficaria o codigo dentro desse arquivo e como eu carregaria ele pelo lightbox.html?

 

valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Olá cauetc,

 

O erro na verdade está nas chamadas das funções das funções javascript, por exemplo, aqui:

 

<input type="button" name="mostrar" value="mostrar" onclick="java script:mostra();"/>

javascript é escrito tudo junto, e não separado, então o correto é javascript

 

Para colocar as funções em um arquivo separadamente, você só precisa fazer uma "chamada" ao arquivo .js (a extensão é essa mesma) entre as tags <head> e </head> do seu arquivo html. Desse modo:

 

<script type="text/javascript" src="script/script.js"></script>

Nessa tag ele especifica o typo do arquivo de script e aponta o caminho do arquivo.

 

Qualquer dúvida é só falar. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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