Ir para conteúdo

Arquivado

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

kathyerafa

[Resolvido] Abrir imagem em pop up

Por , em Javascript

Recommended Posts

kathyerafa    0

kathyerafa
Postado

Olá,

Tenho uma galeria de fotos em meu site, mas as fotos estão em miniatura, como faço para que quando apessoa clicar em uma das fotos abra um pop up com a imagem no tamanho original?

 

E, se possivel, quando a pessoa clicar em uma segunda foto ela não abra em outro pop up e sim no primeiro?

 

Ex.: Tenhu as fotos "a" e "b", clico em "a" e abre "A" no pop up "1"

clico em "b" e abre "B" no pop up "1" também.

 

Obrigada

Compartilhar este post

Link para o post
Compartilhar em outros sites

kathyerafa    0

kathyerafa
Postado

Eu tentei, mas aparece um monte de resultado que não tem nada a ver e o que eu quero não acho..=/

 

Antes de vir aqui perguntar procurei em vários lugares, mas ainda não consegui.

Obrigada

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Página que chama a pop-up:

<html>
<head>
<title>Imagem</title>
<script>
	function abreIMG(imagem) {
		popup = window.open('popup.php?imagem='+imagem,'pop','top=0, left=0, scrollbars=no, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no');
		popup.focus();
	}
</script>
</head>
<body leftmargin="0" topmargin="0">
<a href="exemplo.jpg"><img src="exemplo.jpg" onClick="abreIMG(this.src); return false;"></a>
</body>
</html>

popup.php:

<html>
<head>
<title>Imagem</title>
<script language="javascript">
	var i= 0;
	function resize() {
		if (navigator.appName == 'Netscape') {
			i = 40;
		}
		if (document.images[0]) {
			window.resizeTo(document.images[0].width+10, document.images[0].height+60-i);
		}
	}
</script>
</head>
<body onload="resize();" leftmargin="0" topmargin="0">
<img src="<?php echo $_GET["imagem"]; ?>" border="0" align="center">
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

kathyerafa    0

kathyerafa
Postado

Não consegui, não sei se fiz certo, meu codigo esta assim:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!-- InstanceBegin template="/Templates/pgg.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Documento sem título</title>
<script>
	function abreIMG(imagem) {
		popup = window.open('popup.php?imagem='+imagem,'pop','top=0, left=0, scrollbars=no, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no');
		popup.focus();
	}
</script>


</head>

<body>
<div id="Layer2" style="position:absolute; left:618px; top:41px; width:137px; height:19px; z-index:2"><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif"><strong>home 
  | contato</strong></font></div>
<div id="Layer3" style="position:absolute; left:15px; top:248px; width:276px; height:46px; z-index:3"><!-- InstanceBeginEditable name="EditRegion3" -->EditRegion3<!-- InstanceEndEditable --></div>
<div id="Layer4" style="position:absolute; left:15px; top:303px; width:500px; height:405px; z-index:4"><!-- InstanceBeginEditable name="EditRegion4" --> 
  <br>
  <table border="2">
	<tr> 
	  <td> <div align="center"><a href="/foto%201.htm"><img src="/Imagem%20076.jpg" width="111" height="115" border="0" align="top"></a></div></td>
	  <td colspan="2"><img src="/Imagem%20081.jpg" width="216" height="115"></td>
	  <td><img src="/Imagem%20087.jpg" width="152" height="115"></td>
	</tr>
	<tr> 
	  <td><img src="/Imagem%20083.jpg" width="129" height="115"></td>
	  <td> <div align="center"><img src="/Imagem%20088.jpg" width="86" height="115"></div></td>
	  <td> <div align="center"><img src="/Imagem%20095.jpg" width="94" height="115"></div></td>
	  <td><div align="center"><img src="/Imagem%20102.jpg" width="144" height="115"></div></td>
	</tr>
	<tr> 
	  <td> <div align="center"><img src="/Imagem%20089.jpg" width="126" height="115"></div></td>
	  <td colspan="2"><div align="center"><img src="/Imagem%20112.jpg" width="187" height="115"></div></td>
	  <td><div align="center"><img src="/Imagem%20117.jpg" width="141" height="115"></div></td>
	</tr>
  </table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Você tem que colocar a chamada para a função na tag img da imagem que deseja abrir:

<p><a href="exemplo.jpg"><img src="exemplo.jpg" onClick="abreIMG(this.src); return false;"></a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

kathyerafa    0

kathyerafa
Postado

Coloquei o que você falou, mas mesmo assim abre só uma página vazia e ela abre incompleta. Acho que é algum problema com o 2º código.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sem título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
	var i= 0;
	function resize() {
		if (navigator.appName == 'Netscape') {
			i = 40;
		}
		if (document.images[0]) {
			window.resizeTo(document.images[0].width+10, document.images[0].height+60-i);
		}
	}
</script>
</head>
<body onload="resize();" leftmargin="0" topmargin="0">
<img src="<?php echo $_GET["imagem"]; ?>" border="0" align="center">
<img src="/Imagem%20011.jpg" width="435" height="435"> 
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Qual erro está sendo exibido na barra de estatus? Você salvou como .php e está testando em um servidor que suporte a linguagem?

 

Editei seus posts duas vezes pelo uso excessivo de caps lock, evite escrever textos totalmente em letras maiúsculas. ;)

 

Regras do Fórum iMasters

Compartilhar este post

Link para o post
Compartilhar em outros sites

kathyerafa    0

kathyerafa
Postado

Aparece a página de tamanho normal, mas ela não carrega pos completo.

Eu so meio (muito) inexperiente ainda, e estou fazendo o site no dreamweaver, mas ainda não está hospedado. Não tem como testar sem precisar hospedar? (desculpe a ignorancia).

 

Descupe pelo Caps Lock, eu não sabia que não podia..já li todas as regras.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Tem como fazer só com javascript, mas teria que alterar algumas coisas. Seu servidor tem suporte à PHP? Se tiver é só testar que funciona.

Compartilhar este post

Link para o post
Compartilhar em outros sites

kathyerafa    0

kathyerafa
Postado

Tem suporte php sim.

 

Como eu disse anteriormente, sou muito inexperiente. Já fiz um site anteriormente, porém mais simples e só hospedei após ter completado.

 

Não sei como utilizar um servidor de teste.. :(

 

qual seria o código em javascript?

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

kathyerafa, segue ele só em java script:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
	function abreIMG(imagem){
		var win = null;
		var i = 0;
		var WinSizeHor = 800; //Tamanho do popup antes de redimensionar
		var WinSizeVert = 600; //Tamanho do popup antes de redimensionar
		posHoriz = parseInt((screen.width / 2) - parseInt(imagem.width / 2));
		posVert = parseInt((screen.height / 2) - parseInt(imagem.height / 2));	
		eval("win = window.open('', 'Image' ,config='height=" + WinSizeVert + ",width=" + WinSizeHor + ",scrollbars=no,statusbar=no,left=" + posHoriz + ",top=" + posVert + "')");
		if (navigator.appName == 'Netscape') {
			i = 40;
		}
		win.document.write('<img src='+imagem.src+'>');
		if (win.document.images[0]) {
			win.window.resizeTo(document.images[0].width+10, document.images[0].height+60-i);
		}
		win.focus();
	}
</script>
</head>
<body>
<a href="exemplo.jpg"><img src="exemplo.jpg" onClick="abreIMG(this); return false;"></a>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

kathyerafa    0

kathyerafa
Postado

As partes do popup são essas:

<html><!-- InstanceBegin template="/Templates/pgg.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Documento sem título</title>
<script>
	function abreIMG(imagem){
		var win = null;
		var i = 0;
		var WinSizeHor = 800; //Tamanho do popup antes de redimensionar
		var WinSizeVert = 600; //Tamanho do popup antes de redimensionar
		posHoriz = parseInt((screen.width / 2) - parseInt(imagem.width / 2));
		posVert = parseInt((screen.height / 2) - parseInt(imagem.height / 2));	
		eval("win = window.open('', 'Image' ,config='height=" + WinSizeVert + ",width=" + WinSizeHor + ",scrollbars=no,statusbar=no,left=" + posHoriz + ",top=" + posVert + "')");
		if (navigator.appName == 'Netscape') {
			i = 40;
		}
		win.document.write('<img src='+imagem.src+'>');
		if (win.document.images[0]) {
			win.window.resizeTo(document.images[0].width+10, document.images[0].height+60-i);
		}
		win.focus();
	}
</script>
<!-- InstanceEndEditable -->
</head>

<body>

<table border="2">
	<tr> 
	  <td> <div align="center"><a href="/foto 1.htm"><img src="/Imagem%20076.jpg" width="111" height="115" border="0" align="top" onClick="abreIMG(this); return false;"></a> 
		</div></td>

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

O problema é que a altura e largura estão sendo definidos antes de se chamar a função, assim esses atributos permanecem. Ao criar o pop-up, os atributos da imagem original não são considerados, mas sim os que você definiu inicialmente.

 

Todas as imagens thumbs e originais possuem o mesmo tamanho? (Exemplo: thumbs com 120px X 100px e originais com 400px X 350px).

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