1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Javascript - PoPup Window

Discussão em 'Web Development' iniciada por Morphine0225, 20 de Março de 2009. (Respostas: 10; Visualizações: 2752)

  1. Morphine0225

    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: 27 de Março de 2009
  2. unsilent

    unsilent Power Member

    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: 24 de Março de 2009
  3. Morphine0225

    Morphine0225 Power Member

    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! ;)
     
  4. unsilent

    unsilent Power Member

    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
     
  5. Morphine0225

    Morphine0225 Power Member

    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! ;)
     
  6. Morphine0225

    Morphine0225 Power Member

    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
     
  7. p3dro

    p3dro Power Member

    Tenta alterar isto

    Código:
    if(height==0)
    {popUp();}
    
    para isto

    Código:
    if(height==0)
    {popUp(URL);}
     
  8. unsilent

    unsilent Power Member

    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
     
  9. Huckleberry

    Huckleberry Power Member

    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($imgPATHINFO_EXTENSION), $validExtensions)){
      list(
    $width$height$type$attr) = getimagesize($img);
    }

    echo 
    "$width;$height";
    ?>
     
    Última edição: 29 de Março de 2009
  10. unsilent

    unsilent Power Member

    ...eu é que já não fumo mais nada hoje: Era o pop-up blocker:-D...
    A janela fica minimizada no canto inferior e é tão pequena que nem dei por ela.
     
  11. Huckleberry

    Huckleberry Power Member

    :lol:

    Mas no meu também só funciona com duplo-click
     

Partilhar esta Página