Javascript - PoPup Window

Morphine0225

Power Member
Viva pessoal!

Preciso de uma ajudita. Tenho um código em javascript que serve para cada vez que carregamos numa imagem, um thumbnail, ele faz aparecer essa mesma imagem numa janela de popup em separado. O meu problema é que eu queria que essa janela se adaptasse a imagem, que não ficasse com bocados em branco dentro dela.

O código que uso é:

Código:
<script language="javascript">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=0,width=850,height=850,left = 0,top = 0');");
}
</script>
E depois nas imagens faço:

Código:
<a href="javascript:popUp('[COLOR=Red]link imagem em tamanho grande[/COLOR]')">blablabla</a>
Agradeço toda a ajuda que me possam dar!


Cumps,
Morphine0225
 
Última edição:
Boas, tenta isto:
Código:
<script language="javascript">
function popUp(URL) {
[COLOR="Red"]var newImg = new Image();
newImg.src = URL;
var height = newImg.height;
var width = newImg.width;[/COLOR]	
	
	
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "','toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=0,width=[COLOR="red"]'+width+'[/COLOR],height=[COLOR="red"]'+height+'[/COLOR],left = 0,top = 0');");
}
</script>
cumps
 
Última edição:
Boas, tenta isto:
Código:
<script language="javascript">
function popUp(URL) {
[COLOR=Red]var newImg = new Image();
newImg.src = URL;
var height = newImg.height;
var width = newImg.width;[/COLOR]    
    
    
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "','toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=0,width=[COLOR=red]'+width+'[/COLOR],height=[COLOR=red]'+height+'[/COLOR],left = 0,top = 0');");
}
</script>
cumps

O código faz com que quando abra nova imagem, ela fique (na popup window) com um tamanho minimo, depois conforme se arrasta a janela para aumentar, a imagem acompanha as borders.

Mas fica mesmo pequena a imagem, não a abre logo no tamanho original dela. Sabes do que possa ser?


Obrigado pela ajuda! ;)
 
Oops plicas ' ' em vez de aspas " " :)
Código:
<script language="javascript">
function popUp(URL) {
var newImg = new Image();
newImg.src = URL;
var height = newImg.height;
var width = newImg.width;	
if(height==0)
{popUp();}
else{
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "','toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=1,width="+width+",height="+height+",left = 0,top = 0');");
var newImg=0;
}

}
</script>
Adicionei um if porque o Chrome tem esse comportamento que descreveste, na 1ª vez que se carrega no link.1º abre uma janela o mais pequena possível, depois à segunda já abre com o tamanho pretendido(???).

Entretanto encontrei isto, e parece que faz o que queres...e melhor que qq código que eu alguma vez venha a escrever:007:. cumps
 
Oops plicas ' ' em vez de aspas " " :)
Código:
<script language="javascript">
function popUp(URL) {
var newImg = new Image();
newImg.src = URL;
var height = newImg.height;
var width = newImg.width;    
if(height==0)
{popUp();}
else{
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "','toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=1,width="+width+",height="+height+",left = 0,top = 0');");
var newImg=0;
}

}
</script>
Adicionei um if porque o Chrome tem esse comportamento que descreveste, na 1ª vez que se carrega no link.1º abre uma janela o mais pequena possível, depois à segunda já abre com o tamanho pretendido(???).

Entretanto encontrei isto, e parece que faz o que queres...e melhor que qq código que eu alguma vez venha a escrever:007:. cumps

Desta vez já funciona bem aparte de ter que se dar mais que um clique na foto. :P

http://www.engrambikes.com/galeria/quadros.php Comprova aqui.

Tive a ver esse site que me deste, obrigado!

Mas gostava de meter este código que já tenho a trabalhar.

Obrigado pela ajuda que estás a dar! ;)
 
Conseguem-me ajudar com este problema? O código que o 'unsilent' me deu ficou óptimo, mas preciso apenas de resolver a parte em que é preciso dar mais que um clique para abrir a imagem em popup. Não funciona como se fosse uma hiperligação normal.. :S


Cumps
 
Não sei se entretanto já resolveste o problema mas fica aqui uma contribuição:
Código:
<script language='javascript' type='text/javascript'>
function popUp(URL) {
this.URL=URL;
var newImg = new Image();
newImg.src = URL;
if (newImg.complete) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "','toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=1,width="+newImg.width+",height="+newImg.height+",left = 0,top = 0');");

}
else {
setTimeout('popUp(URL)', 1000);
}
}
</script>
Testei com uma imagem de 4mb no Ie/FF/Opera e funcionou. No Chrome é preciso + um clique, e ainda não consegui perceber porque, mas vou tentar.

Se te quiseres divertir a tentar uma solução só p/ o chrome:) :
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

cumps
 
Desconhecia esse problema feature :D do chrome.


Visto que o teu servidor suporta php, podes tentar utilizar ajax.

Código:
<script type="text/javascript">
  function popUp(URL) {
    var xmlHttp;
    try {
      // Firefox, Opera 8.0+, Safari
      xmlHttp = new XMLHttpRequest();
    }
    catch (e) {
      // Internet Explorer
      try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e) {
        try {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
          alert("Your browser does not support AJAX!");
          return false;
        }
      }
    }
    xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4) {
        var dim = xmlHttp.responseText;
        img_dim = dim.split(";");
        if (img_dim[0] > 0 && img_dim[1] > 0) {
          day = new Date();
          id = day.getTime();
          window.open(URL, id, "toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=0,resizable=1,width=" + img_dim[0] + ",height=" + img_dim[1] + ",left = 0,top = 0");
        }
      }
    }
    xmlHttp.open("GET", "imagesize.php?img="+URL+"&cache="+Math.random(), true);
    xmlHttp.send(null);
  }
</script>


imagesize.php


PHP:
<?php

$validExtensions=array("jpg","gif","bmp","png");
$img=$_GET["img"];

$width=0;
$height=0;

if(in_array(pathinfo($img, PATHINFO_EXTENSION), $validExtensions)){
  list($width, $height, $type, $attr) = getimagesize($img);
}

echo "$width;$height";
?>
 
Última edição:
Back
Topo