Ir para conteúdo

POWERED BY:

Arquivado

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

THCB

Quando clicar no link abrir um popup com uma foto

Por , em Desenvolvimento frontend

Recommended Posts

THCB    0

THCB
Postado

Alguém saberia me dizer como faço para que quando clicar-se em um link, abrir uma janela a qual terá exatamente o tamanho da foto que ela conterá?

 

Ex. tenho uma página com uma foto e um link escrito ampliar . Gostaria que ao se clicar NO LINK (e não na foto), abrir uma janela popup com a foto maior.

 

Além disso, gostaria de saber se é possível abrir essa janela popup sem os botõeszinhos de minimizar, maximizar, etc.

 

Alguem sabe?

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Pesquise por LightBox!

 

fica muito legal!

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

THCB    0

THCB
Postado

obrigada nícolas ;d

 

eu achei um no site que você me mostrou que me interessou por ser bem simples, é só clicar na imagem que ela abre maior e o fundo fica com opacidade menor. Porém não estou conseguindo adaptar o código para outras fotos. Queria colocar esse efeito para duas fotos.

 

Veja os codigos:

 

lightbox.js

 

function lightbox() {
	var anchor		= getElementsByClassName(document, 'a', 'light-box');
	var closeButton	= getElementsByClassName(document, 'a', 'close-button');

	var black	= document.getElementById('fade');
		black.style.display = 'none';
	var light	= document.getElementById('light');
		light.style.display = 'none';

	if(anchor) {
		for(var i = 0; i < anchor.length; i++) {
			anchor[i].onclick = function() {
				if(black.style.display == 'none' && light.style.display == 'none') {
					black.style.display = 'block';
					light.style.display = 'block';
				}
			};
		}
	}

	if(closeButton) {
		for(var j = 0; j < closeButton.length; j++) {
			closeButton[j].onclick = function() {
				black.style.display = 'none';
				light.style.display = 'none';
			};
		}
	}
}

teste.htm

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Teste Lightbox</title>
		<style>
		.black_overlay{
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color:#2A4570;
			z-index:1001;
			-moz-opacity: 0.8;
			opacity:.80;
			filter: alpha(opacity=80);
		}
		.white_content {
			display: none;
			position: absolute;
			top: 25%;
			left: 25%;
			width: 510px;
			height: 650px;
			padding: 16px;
			border: 5px solid orange;
			background-color: white;
			z-index:1002;
			overflow: auto;
		}
		#light img{float:left;}
		.close-button{float:right;}
		
	</style>
	</head>
	<script type="text/javascript" src="lightbox.js"></script>
	<body onLoad="lightbox()">

		<img src="1.jpg"/> <a href="#" class="light-box">ampliar</a></p>
		<div id="light" class="white_content"> <img src="01.jpg"> <a href="#" class="close-button">Fechar</a></div>

		<div id="fade" class="black_overlay"></div>
	</body>
</html>

Gostaria de colocar uma segunda foto com um segundo link de "ampliar".

 

Obrigado pela atenção

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

já tentou fazer isso

 

<img src="1.jpg"/> <a href="#" class="light-box">ampliar</a></p>
		<div id="light" class="white_content"> <img src="01.jpg"> <a href="#" class="close-button">Fechar</a></div>
<img src="2.jpg"/> <a href="#" class="light-box">ampliar</a></p>
		<div id="light" class="white_content"> <img src="02.jpg"> <a href="#" class="close-button">Fechar</a></div>

Compartilhar este post

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

Informação importante

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

  Aceito