Deixando resquícios duvidosos para arqueólogos do futuro.
Especiais
Abrir janela no tamanho da imagem
9 de dezembro, 2006 por Ricardo José Corrêa
(1 voto, média: 5 de 5)
Loading ...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>
Technorati Tags: javascript, php
dezembro 8th, 2007 em 10:30
Cara…blz?
eu não consegui fazer esse esquema de popup do tamanho da imagem….da erro…pq será?
Flw
maio 1st, 2008 em 23:06
Rodrigo, usa o Lightbox. Bem melhor:
http://www.rjcorrea.com.br/popup-para-abrir-imagem-lightbox/
agosto 27th, 2008 em 08:13
mto bom sua página amigo.
até mais.
paz