9 de dezembro de 2006

Abrir janela no tamanho da imagem

Javascript, PHP | 4 Comentários »
por Ricardo José Corrêa

A alguns anos, antes de conhecer o PHP, fiz um script todo em javascript que abria uma pop-up no tamanho da imagem, centralizada na tela, e sem precisar informar suas dimensões. Neste post vou compartilhar uma nova versão, agora com PHP. É bem comodo para quem quer dar link para um monte de imagem e não quer ficar passando um monte de parametros.

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Abre pop-up no tamanho da imagem</title>
</head>
<body>
<script type="text/javascript">
function abreImg(imagemVar){
configuraAbreImg="toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=300,height=300";
window.open('img.php?img='+imagemVar,'abreImg',configuraAbreImg)
}
</script>
<a xhref="javascript:abreImg('http://www.rjcorrea.com.br/scripts/javascript/img_tamanho_tela/foto_01.jpg')" mce_href="javascript:abreImg('http://www.rjcorrea.com.br/scripts/javascript/img_tamanho_tela/foto_01.jpg')" >Abre imagem 01</a><br />
<a xhref="javascript:abreImg('http://www.rjcorrea.com.br/scripts/javascript/img_tamanho_tela/foto_02.jpg')" mce_href="javascript:abreImg('http://www.rjcorrea.com.br/scripts/javascript/img_tamanho_tela/foto_02.jpg')" >Abre imagem 02</a><br />
<a xhref="javascript:abreImg('http://www.rjcorrea.com.br/scripts/javascript/img_tamanho_tela/foto_03.jpg')" mce_href="javascript:abreImg('http://www.rjcorrea.com.br/scripts/javascript/img_tamanho_tela/foto_03.jpg')" >Abre imagem 03</a><br />
<a xhref="javascript:abreImg('http://www.rjcorrea.com.br/scripts/javascript/img_tamanho_tela/foto_04.jpg')" mce_href="javascript:abreImg('http://www.rjcorrea.com.br/scripts/javascript/img_tamanho_tela/foto_04.jpg')" >Abre imagem 04</a><br />
</body>
</html>

img.php

<?
$img = $_GET['img'];
$expande = $_GET['expande'];
 
/////////////////////////////////////
////////////// RjCorrêa /////////////
//Abre pop-up no tamanho da imagem //
/////////www.rjcorrea.com.br/////////
/////////////////////////////////////
 
// Função que pega informações de imagens, são elas: largura e legenda da imagem
function pegaInfoImg($imagem){
$informacoes = GetImageSize($imagem);
$largura = $informacoes[0];
$retorno[0] = $largura;
$altura = $informacoes[1];
$retorno[1] = $altura;
return $retorno;
}
 
// Roda função que pega informações da imagem
$variaveis = pegaInfoImg($img);
 
// Aqui as variáveis são nomeadas diferentemente para facilitar o uso das variáveis
$largura = $variaveis[0];
$altura = $variaveis[1];
 
if ($largura >= 600 and !$expande){
$fator = $largura/600;
$largura = $largura/$fator;
$altura = $altura/$fator;
}
 
if ($altura >= 500 and !$expande){
$fator = $altura/500;
$largura = $largura/$fator;
$altura = $altura/$fator;
}
 
$larguraJanela = $largura+7;
$alturaJanela = $altura+50;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Abre pop-up no tamanho da imagem</title>
<meta NAME="Generator" CONTENT="EditPlus">
<meta NAME="Author" CONTENT="">
<meta NAME="Keywords" CONTENT="">
<meta NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
<!--
function tamanho(){
VarImgH=<?=$largura;?>/2;
VarTelaH=window.screen.availWidth/2;
VarTelaH=VarTelaH-VarImgH-12;
VarImgV=<?=$altura;?>/2;
VarTelaV=window.screen.availHeight/2;
VarTelaV=VarTelaV-VarImgV-17;
 
// Imagem normal
if (<?=$largura;?> < screen.availWidth && <?=$altura;?> < screen.availHeight){
if (navigator.appName == "Netscape"){
window.resizeTo(<?=$largura;?>+8, <?=$altura;?>+52);
}else{window.resizeTo(<?=$largura;?>+7, <?=$altura;?>+31);}
moveTo(VarTelaH,VarTelaV);
document.body.scroll="no";
}
 
// Imagem muito larga
if (<?=$largura;?> >= screen.availWidth && <?=$altura;?> < screen.availHeight){
if (navigator.appName == "Netscape"){
window.resizeTo(window.screen.availWidth, <?=$altura;?>+68);
}else{window.resizeTo(window.screen.availWidth, <?=$altura;?>+47);}
document.body.scroll="auto";
moveTo(0,VarTelaV);
}
 
// Imagem muito alta
if (<?=$largura;?> < screen.availWidth && <?=$altura;?> >= screen.availHeight){
if (navigator.appName == "Netscape"){
window.resizeTo(<?=$largura;?>+29, window.screen.availHeight);
}else{window.resizeTo(<?=$largura;?>+28, window.screen.availHeight);}
document.body.scroll="auto";
moveTo(VarTelaH,0);
}
 
// Imagem muito larga e muito alta
if (<?=$largura;?> >= screen.availWidth && <?=$altura;?> >= screen.availHeight){
window.resizeTo(window.screen.availWidth, window.screen.availHeight);
document.body.scroll="auto";
moveTo(0,0)
}
}
//-->
</script>
</head>
<?
if ($fator){
echo "<body onLoad="tamanho();" style="margin:0px">";
echo "<a xhref="img.php?img=$img&expande=1" title="Clique aqui para ampliar">";
echo "<img xsrc="$img" width="$largura" height="$altura" border="0"></a>";
}else{
$largura = $largura-10;
$altura = $altura-4;
echo "<body onLoad="tamanho();" style="margin:0px;background-image:url($img);background-repeat:no-repeat;">";
echo "<a xhref="img.php?img=$img" title="Clique aqui para reduzir">";
echo "<img xsrc="0.gif" width="$largura" height="$altura" border="0"></a>";
}
?>
</body>
</html>

No related posts.


Você pode deixar um comentário, ou trackback de seu próprio site.

4 comentários para “Abrir janela no tamanho da imagem”

  1. Rodrigo falou:
    dezembro 8th, 2007 at 10:30 am

    Cara…blz?

    eu não consegui fazer esse esquema de popup do tamanho da imagem….da erro…pq será?

    Flw

  2. Ricardo José Corrêa falou:
    maio 1st, 2008 at 11:06 pm

    Rodrigo, usa o Lightbox. Bem melhor:
    http://www.rjcorrea.com.br/popup-para-abrir-imagem-lightbox/

  3. Paulo Henrique falou:
    agosto 27th, 2008 at 8:13 am

    mto bom sua página amigo.

    até mais.

    paz

  4. Rubia falou:
    junho 23rd, 2009 at 5:50 pm

    Boa tarde Ricardo,

    Muito bom o tutorial.

    Obrigada.

Deixe um comentário