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

Pop-Up Window com dimensões automáticas

Discussão em 'Web Development' iniciada por Rui Marto, 4 de Abril de 2008. (Respostas: 4; Visualizações: 868)

  1. Rui Marto

    Rui Marto Power Member

    Estou a fazer uma página com um índice de fotografias e queria saber como é que faço para que quando se clica nas imagens, o browser abra uma janela popup e dimensione automaticamente essa janela ao tamanho da imagem.
    Tenho um script muito simples, mas não faz a 100% o que eu quero, pois tanto no FF como no IE apenas abre um separador novo, com a imagem ao canto numa janela enorme de fundo branco.

    Encontrei este script mais completo, que já ajusta a janela à imagem, sem eu ter que lhe dar as dimensões, mas só funciona bem no Firefox. Aí o único "erro" é que no título da janela me aparece sempre "file://-Título" em vez de "Título".
    Código:
    PositionX = 100;
    PositionY = 100;
    defaultWidth = 821;
    defaultHeight = 620;
    var AutoClose = true;
    if (parseInt(navigator.appVersion.charAt(0))>=4){
    var isNN=(navigator.appName=="Netscape")?1:0;
    var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
    var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
    var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
    function popupImage(imageURL,imageTitle){
    if (isNN){imgWin=window.open('about:blank','',optNN);}
    if (isIE){imgWin=window.open('about:blank','',optIE);}
    with (imgWin.document){
    writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
    writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
    writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
    writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
    writeln('width=100-(document.body.clientWidth-document.images[0].width);');
    writeln('height=100-(document.body.clientHeight-document.images[0].height);');
    writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
    writeln('window.innerWidth=document.images["Imagem"].width;');writeln('window.innerHeight=document.images["Imagem"].height;}}');
    writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
    if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
    else writeln('</head><body bgcolor=F4FFE4 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
    writeln('<img name="Imagem" src='+imageURL+' style="display:block"></body></html>');
    close();
    }}
    Também tentei criar este, mas não funciona:
    Código:
    function imagePopup(imageURL) {
        newWindow = window.open("newWindow","width="+imageURL.width+",height="+imageURL.height+",scrollbars=no");
        newWindow.document.open();
        newWindow.document.write('<html><title>Imagem</title><body bgcolor="#F4FFE4" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onBlur="self.close()">');
        newWindow.document.write('<img src=\"'+imageURL+'\" width='+imageURL.width+' height='+imageURL.height+' alt="Imagem">');
        newWindow.document.write('</body></html>');
        newWindow.document.close();
        newWindow.focus();
    }
     
    Última edição: 4 de Abril de 2008
  2. kilOmbo

    kilOmbo Power Member

    implementei recentemente algo desse género num site que criei e também andei um bocado às voltas até que funcionasse..

    verifica o código da frame de conteudos: http://mikizon.pt/main.html
    tem lá a função em javascript e a forma como a deves chamar no link ;)

    em alternativa, se quiseres algo mais elegante e também mais complexo, tens o LightBox:
    http://www.huddletogether.com/projects/lightbox2/
     
  3. Rui Marto

    Rui Marto Power Member

    Obrigado, já não me lembrava do Lightbox. Encontrei como fazer isso só com CSS, o que para mim é preferível. :)
     
  4. kilOmbo

    kilOmbo Power Member

    já agora chuta aí essa solução, pode ser que ajude alguém que venha procurar acerca disso ;)
     
  5. Rui Marto

    Rui Marto Power Member

Partilhar esta Página