redimension con script php

pablobuitres · #1 (**permalink**) 31/01/2011, 16:33

hola amigos encontre un script en los aportes que toma las imagenes y las lleva a las medidas que queremos, ahora hay forma de que las imagenes sean modificadas
y permanescan en esta nueva medida sin pasar por este codigo?
explico el por que, tengo un css que llama a las imagenes desde su carpeta actual y toma su medida original y realmente no puedo aplicar el script que mencione, o bueno tal vez si, uds que dicen?
les agradesco mucho,

Nano_ · #2 (**permalink**) 31/01/2011, 16:45

Saludos

Si nos indicas como lo estas manejando (código fuente), te podríamos orientar mejor!

pablobuitres · #3 (**permalink**) 31/01/2011, 17:33

/*Función REDIMENSIONAR
Toma la ruta de una imagen, un valor máximo
de ancho y otro máximo de alto. Si la imagen
rebasa dichas medidas, calcula las medidas
máximas que podría tener manteniendo el
formato original para no salirse de las medidas
indicadas.

Finalmente la función imprime la imagen.
*/

function redimensionar($ruta,$ancho,$alto){

//Obtenemos las dimensiones, la ruta es absoluta.
$dim = getimagesize($ruta);
/*getimagesize() pasa un array a la variable
$dim tal que $dim[0] contiene el ancho de la imagen
y dim[1] contiene el alto.*/
if($dim[1]){
//Para asegurarnos de que dim[1] es diferente de cero
$cociente = $dim[0] / $dim[1];
}
if($alto){
//Para asegurarnos de que alto es diferente de cero
$coc_max = $ancho / $alto;
}

if(($dim[0]<=$ancho)&&($dim[1]<=$alto)){
/*En este caso no pasa nada y
la imagen se imprime con su tamaño original*/
$ancho = $dim[0];
$alto = $dim[1];
}else{
if($cociente>=$coc_max){
/*En este caso el factor más restrictivo
va a ser el ancho de la foto*/
$alto = $ancho / $cociente;
}else{
/*En este caso el factor restrictivo
va a ser la altura de la foto*/
$ancho = $alto * $cociente;
}
}
echo "<img src='$ruta' width='$ancho' height='$alto'>";

}
?>
<?php

include ("redi.php");
$d= stripslashes($_POST["d"]);
$mi_ruta_relativa = "files2/".$d.""; /*ruta relativa de la
imagen a mostrar*/

redimensionar($mi_ruta_relativa,600,400);

?>
estos son los script que redimensionan
ahora posteo el que me da problemas
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Making an Interactive Picture with jQuery | Build Internet!</title>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Blur Links (Prevents Outline)
$('a').click(function() {
this.blur();
});

//Hide all item descriptions in the info box
$("#infobox > div").css("display", "none");

//Call in the info box
$(".more a").click(function(){
$("#infobox").animate({bottom: '233px' }, 300);
$("#fade_bg").fadeIn();
return false;
});

//Expand more info button on hover
$(".more").hover(function(){
$(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'}); //Change the width increase caption size
}, function () {
$(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'});
});

//Show description for selected item
$("#couch a").click(function(){
$("#couch_info").show();
});

$("#plant a").click(function(){
$("#plant_info").show();
});

$("#monitor a").click(function(){
$("#monitor_info").show();
});

$("#board a").click(function(){
$("#board_info").show();
});

//Remove background, info box and hide all descriptions
$("#fade_bg, .close").click(function(){
$("#fade_bg").fadeOut();
$("#infobox").animate({bottom: '-200px' }, 300, function() {
$("#infobox > div").css("display", "none");
});
return false;
});

});
</script>

<style type="text/css">

/* General Styles */
*{ padding:0px; margin:0px; }
img{ border: none; }
a:focus, a:active{ outline:none; }
body{ text-align:center; background:#FFF; }
h1{ font:bold 18px Helvetica, Arial, sans-sarif; color:#FFF; margin:20px 0 0 0; }

/* Picture Styles */
#picture{ position:relative; top:20px; width:604px; height:453px; margin:0px auto; background:#FFF url('files2/graciela 001.jpg'); overflow:scroll; }

/* General More Button */
.more{ position:absolute; width:50px; height:50px; background:url('dim.png'); border:1px solid #444; padding:5px; text-align:left; overflow:hidden; }

.more span{ position:absolute; left:60px; width:160px; padding:15px 0 0 5px; color:#FFF; font:bold 13px Lucida Grande, Arial, sans-serif; text-shadow:#000 1px 1px 0px; }

/* Item Specific More Button */

#board{ top:<?php
$b= stripslashes($_POST["b"]);
$b = strip_tags($b);
echo $b;?>px
; left:<?php
$a= stripslashes($_POST["a"]);
$a = strip_tags($a);
echo $a;?>px; }

/* General Info Box */
#infobox{ position:absolute; bottom:-200px; left: 350px; height:200px; width:300px; z-index:20; margin:0 0 -100px -150px; background:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
#infobox a, #infobox a:visited{ font:italic 16px Georgia, serif; color:#555; text-decoration:none; }
#infobox a:hover{ text-decoration:underline; }

/* Close button for info box */
span.close{position:absolute; right:5px; top:5px;}

/* The dimmed background when the info box is showing */
#fade_bg{ position:absolute; z-index:15; width:100%; height:100%; background:url('dim.png'); display:none;}

</style>

</head>

<body>
<h1>etiqueta estas imagenes</h1>
<div id="picture">



<div class="more" id="board">
<a href="#"><img src="more.png"/></a>
<span><?php echo $nombre= stripslashes($_POST["nombre"]);
?></span>
</div>


<div id="infobox">
<span class="close"><a href="#"><img src="close.png"/></a></span>
<br/>

<div id="couch_info">
<img src="http://localhost/localhost/files2/graciela 026.jpg"/><br/>
<a href="http://www.ikea.com/us/en/catalog/products/10138530">IKEA Klippan Couch</a>
</div>

<div id="plant_info">
<img src="plant.jpg"/><br/>
<a href="http://images.google.com/images?q=office%20plants&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a&um=1&ie=UTF-8&sa=N&hl=en&tab=wi">Office Plants</a>
</div>

<div id="monitor_info">
<img src="samsung.jpg"/><br/>
<a href="http://www.samsung.com/us/consumer/office/monitors/professional/LS30HUXCB/XAA/index.idx?pagetype=prd_detail">Samsung 305t Monitor</a>
</div>

<div id="board_info">
<img src="whiteboard.jpg"/><br/>
<a href="http://www.lowes.com/lowes/lkn?action=productDetail&productId=61082-46498-31023248&lpage=none">Custom Whiteboards</a>
</div>
</div>


<div id="fade_bg"> </div>

</div>

</body>
</html>

<?php
include('uu.php');?>
<?php
include ('config.php');
$parent_id = $_GET['id'];
$nombre= stripslashes($_POST["nombre"]);
$d= stripslashes($_POST["d"]);
$x= stripslashes($_POST["b"]);
$y= stripslashes($_POST["a"]);
$query = mysql_query("INSERT INTO eti(parent_id,nombre,d,x,y) values ('$parent_id','$nombre','$d','$x','$y') ");
?>

pablobuitres · #4 (**permalink**) 31/01/2011, 17:36

les aclaro un poco mas el problema lo tengo aca

/* Picture Styles */
#picture{ position:relative; top:20px; width:604px; height:453px; margin:0px auto; background:#FFF url('files2/graciela 001.jpg'); overflow:scroll; }
si la imagen es mas grande que esas dimensiones la corta, si es mas chica la repite,