Ir para conteúdo

Arquivado

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

klonder

[Resolvido] Light Box

Por , em Javascript

Recommended Posts

klonder    14

klonder
Postado

Olá pessoal!

 

Sei que já existe um tópico recente sobre Light Box mas, para não interferir no modelo do autor, resolvi criar outro tópico para fazer uma comparação entre dois modelos diferentes desse assunto.

 

OBSERVAÇÃO: Devido à maneira como o fórum trata o termo javascript (separando em: java script) nos blocos referentes ao código-fonte, lembrem-se de arrumar isso antes de testar o código em seu editor HTML.

Exemplos:

Errado: <a href="java script: abrir_fundo('imagem1.jpg')">

Correto: <a href="javascript: abrir_fundo('imagem1.jpg')">

 

Modelo 1 - Mais utilizado (Testado no IE 7, Opera 9.52 e Mozilla 3.0.6)

Nesse exemplo, mesmo após o Light Box ser colocado em ação, é possível que o usuário mova a barra de rolagem para cima e para baixo.

<html>
<head>
<title>Efeito Light Box</title>
<style type="text/css">
#fundo1 {
position:absolute; z-index:2;
display:none; background-color:#000000; 
opacity: .6;
filter: alpha(opacity=60);
}	

#fundo2 {width:300; height:300;
position:absolute; z-index:3;
visibility:hidden; background-color:#FFFFFF;
border-left:#555555 1px solid; border-top:#555555 1px solid;
border-right:#000000 1px solid; border-bottom:#000000 1px solid;
}
</style>

<script type="text/javascript">
function abrir_fundo(e) {
var fundo1 = document.getElementById("fundo1");
fundo1.style.top = "0px"; fundo1.style.left = "0px";
fundo1.style.width = document.body.scrollWidth;
fundo1.style.height = document.body.scrollHeight;
fundo1.style.display = "block";

var fundo3 = document.getElementById("fundo3");
fundo3.innerHTML = "<img src='"+e+"' border='0px'>";

var fundo2 = document.getElementById("fundo2");
fundo2.style.top = (document.body.clientHeight/2)-(fundo2.offsetHeight/2);
fundo2.style.left = (document.body.clientWidth/2)-(fundo2.offsetWidth/2);
fundo2.style.visibility = "visible";
}

function fechar_fundo() {
var fundo1 = document.getElementById("fundo1");
fundo2.style.visibility = "hidden";
fundo1.style.display = "none";
}
</script>
</head>

<body>
<div id="fundo1"></div>

<div id="fundo2">
<table border="0" width="100%" height="100%">
<tr>
	<td align="right" style="font-family:tahoma,verdana,arial; font-size:11px;"><a href="java script: fechar_fundo()">Fechar</a></td>
</tr>
<tr>
	<td align="center" valign="middle"><div id="fundo3"></div></td>
</tr>
</table>
</div>

<a href="java script: abrir_fundo('imagem1.jpg')">Clique para abrir: imagem1.jpg</a>
<br><a href="java script: abrir_fundo('imagem2.jpg')">Clique para abrir: imagem2.jpg</a>

<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento<br><br>Corpo do documento
</body>
</html>

 

Modelo 2 - Barra de rolagem não acessível (Testado no IE 7, Opera 9.52 e Mozilla 3.0.6)

Nesse caso, após o Light Box se tornar ativo, a barra é coberta pelo div e não fica acessível para rolagem. Para que esse efeito seja possível, é necessário que todo o código-fonte HTML fique dentro de uma div, cujo id é "corpo".

 

<html>
<title>Efeito LightBox</title>
<style type="text/css">
*{margin:0; padding:0;}
html,body{overflow:hidden; width:100%; height:100%;}
#corpo{width:100%; height:100%; overflow:auto;}

#fundo1 {
position:absolute; z-index:2;
display:none; background-color:#000000; 
opacity: .6;
filter: alpha(opacity=60);
}	

#fundo2 {width:300; height:300;
position:absolute; z-index:3;
visibility:hidden; background-color:#FFFFFF;
border-left:#555555 1px solid; border-top:#555555 1px solid;
border-right:#000000 1px solid; border-bottom:#000000 1px solid;
}
</style>

<script type="text/javascript">
function abrir_fundo(e) {
var fundo1 = document.getElementById("fundo1");
fundo1.style.top = "0px";
fundo1.style.left = "0px";
fundo1.style.width = document.body.clientWidth;
fundo1.style.height = document.body.clientHeight;
fundo1.style.display = "block";

var fundo3 = document.getElementById("fundo3");
fundo3.innerHTML = "<img src='"+e+"' border='0px'>";

var fundo2 = document.getElementById("fundo2");
fundo2.style.top = (document.body.clientHeight/2)-(fundo2.offsetHeight/2);
fundo2.style.left = (document.body.clientWidth/2)-(fundo2.offsetWidth/2);
fundo2.style.visibility = "visible";
}

function fechar_fundo() {
var fundo1 = document.getElementById("fundo1");
fundo2.style.visibility = "hidden";
fundo1.style.display = "none";
}
</script>

</head>
<body>
<div id="fundo1"></div>
<div id="fundo2">

<table border="0" width="100%" height="100%">
<tr>
	<td align="right" style="font-family:tahoma,verdana,arial; font-size:11px;"><a href="java script: fechar_fundo()">Fechar</a></td>
</tr>
<tr>
	<td align="center" valign="middle"><div id="fundo3"></div></td>
</tr>
</table>
</div>


<div id="corpo">
<a href="java script: abrir_fundo('imagem1.jpg')">Clique para abrir: imagem1.jpg</a>
<br><a href="java script: abrir_fundo('imagem2.jpg')">Clique para abrir: imagem2.jpg</a>
<br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";
<br><br><br><br>Conteúdo de sua página dentro da div com id="corpo";

</div>
</body>
</html>

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