Ir para conteúdo

Arquivado

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

-=AnDuIn=-

Abrir imagens em uma janela popup

Por , em Javascript

Recommended Posts

-=AnDuIn=-    0

-=AnDuIn=-
Postado

Bom dia galera,

 

Eu estou desenvolvendo um site, e gostaria que, quando eu clicar em uma imagem em miniatura, essa imagem abra em seu tamanho real, mas numa janela com as dimensões exatas dessa imagem.

 

Encontrei um código no wmonline.com.br e funcionou, mas somente para uma única imagem. Como na minha página serão várias imagens, gostaria de saber se alguem tem algum código para fazer isso.

 

Caso alguem possa ajudar, estou mandando também o código que utilizei para essa função.

 

 

<-- PARA ABRIR UMA IMAGEM, USEI O SEGUINTE CÓDIGO--><script language="JavaScript">function abrir(URL) {   var width = 500;   var height = 400;   var left = 99;   var top = 99;   window.open(URL,'teste1', 'width='+width+', height='+height+', top='+top+', left='+left+', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no');}</script><a href="java script:abrir('teste.html');">Clique Aqui</a><-- PARA ABRIR A SEGUNDA IMAGEM, APENAS COPIEI ESSE SCRIPT ACIMA-->]<script language="JavaScript">function abrir(URL) {   var width = 200;   var height = 100;   var left = 99;   var top = 99;   window.open(URL,'teste2, 'width='+width+', height='+height+', top='+top+', left='+left+', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no');}</script><a href="java script:abrir('teste2.html');">Clique Aqui</a>
Bom, o problema é esse pessoal..

 

As duas imagens abrem em uma nova janela, mas essas novas janelas não possuem tamanhos diferente (como deveria ser), então as imagens são cortadas.

 

Não sei se expliquei direito, qualquer coisa me escrevam..

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

guezth    0

guezth
Postado

o erro eh q você definiu a mesma função pras duas... você teria q fazer assim

 

javascript1

<script language="JavaScript">function abrir2(URL) {var width = 500;var height = 400;var left = 99;var top = 99;window.open(URL,'teste1', 'width='+width+', height='+height+', top='+top+', left='+left+', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no');}</script>

o link deveria ficar assim como você mesmo colocou

<a href="java script:abrir('teste.html');">Clique Aqui</a>

 

javascript2

<script language="JavaScript">function abrir(URL) {var width = 200;var height = 100;var left = 99;var top = 99;window.open(URL,'teste2, 'width='+width+', height='+height+', top='+top+', left='+left+', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no');}</script>

mas aqui o link seria

 

<a href="java script:abrir2('teste.html');">Clique Aqui</a>

mudando soh a funcão do javascript

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jefrey    0

Jefrey
Postado

Desta minha maneira, você consegue abrir quantos pop-ups quiser de tamanhos completamente diferentes, com apenas uma função ( visualizar(url,altura,largura) ).

Isto ficará no HEADER da página:

<script language="JavaScript">
function Visualizar( imgurl , W , H ){


var newwin = window.open('','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width='+W+',height='+H+',top=100,left=100');

 newwin.document.write('<html><head><title>Título da janela</title></head>');
 newwin.document.write('<body>');
 newwin.document.write('<img src=' + imgurl +'>');
 newwin.document.write('</body></html>');

 newwin.document.close();

}
</script>

E então, já no BODY, os links ficariam assim:

 

<a href="javascript:void(0);" onclick="visualizar('http://forum.imasters.com.br/random_logos/logo3.png','335','102');"><img src="http://forum.imasters.com.br/random_logos/logo3.png" alt="Clique para ver maior" width="100" height="50"></a>

Explicação:

visualizar('endereco-da-imagem','altura','largura')

 

É isso aí, tenta aí pra ver... Aqui deu certo no IE, FF, Chrome e Netscape! B)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniluz    0

Daniluz
Postado

Saudações colegas, eu utilizei o seguinte código para centralizar uma imagem e amplia-la ao clicar na mesma:

<center><a href="javascript:void(0);" onclick="visualizar('http://www.coladaweb.com/files/mapa-mundi2.jpg','340','680');"><img src="http://www.coladaweb.com/files/mapa-mundi2.jpg" alt="Clique para ver maior" width="400" height="200"></a><center>

Mas não deu certo, alguem pode me ajudar. Aparece apenas a imagem, mas não tem efeito algum quando clico sobre ela.

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