Como combinar esto

arielgon · #1 (**permalink**) 12/11/2009, 21:37

Hola quiero combinar estos dos scripts, jcrop para recortar, para seleccionar la imagen, la muestre en el thumbnail y que la cargue en el formulario, osea quiero combinarlas. desde ya muchas gracias,
<script language="Javascript">
jQuery(window).load(function(){

jQuery('#cropbox').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1

});

});

function showPreview(coords)
{
if (parseInt(coords.w) > 0)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;

jQuery('#preview').css({
width: Math.round(rx * 190) + 'px',
height: Math.round(ry * 190) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
}
</script>
<script language="Javascript">

$(function(){

$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});

});

function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};

</script>

crujikoki · #2 (**permalink**) 13/11/2009, 01:55

Hola,

Me imagino que al decir "quiero combinarlas" te refieres a que quieres que todas las funciones se ejecuten dentro de una misma función, por ejemplo. Osea que si tu llamas a la función "ejecutartodo" te haga todo eso que quieres que haga.

Pues bien, dado que el JS (y me imagino que el JQ también) es secuencial, solo tienes que poner el código de todas las funciones en el eorden en que quieres que se ejecuten y listos! Eso si, en la función nueva, tendrás que pasar por parámetro todos los parámetros que tienen las funciones antiguas.

Por ejemplo, si ahora tienes algo así:

<script language="Javascript">
function1()
{
//código función 1
}

function2(parámetro1, parámetro2)
{
//código función 2
}

function3(parámetro3)
{
//código función 3
}
</script>

Y lo que quieres conseguir es que primero se haga la función 2, luego la 1 y finalmente la 3, tendrás que hacer algo así:

<script language="Javascript">

functionQueLoHaceTodo(parámetro1, parámetro2, parámetro3)
{

//código función 2

//código función 1

//código función 3
}

</script>

No te tiene que resultar muy complicado, pero si no sabes hacerlo y te lo hago yo no vas a aprender! Si no te aclaras vuelve a postear y te ponemos la solución.

arielgon · #3 (**permalink**) 13/11/2009, 06:42

hola, crujikoki muchas gracias por la respuesta, es muy cierto, estoy aprendiendo y voy a itentar lo que me dices, cualquier duda vuelvo a postear y nuevamente muchas gracias

arielgon · #4 (**permalink**) 13/11/2009, 16:30

Cita:

Iniciado por crujikoki

Hola,

Me imagino que al decir "quiero combinarlas" te refieres a que quieres que todas las funciones se ejecuten dentro de una misma función, por ejemplo. Osea que si tu llamas a la función "ejecutartodo" te haga todo eso que quieres que haga.

Pues bien, dado que el JS (y me imagino que el JQ también) es secuencial, solo tienes que poner el código de todas las funciones en el eorden en que quieres que se ejecuten y listos! Eso si, en la función nueva, tendrás que pasar por parámetro todos los parámetros que tienen las funciones antiguas.

Por ejemplo, si ahora tienes algo así:

<script language="Javascript">
function1()
{
//código función 1
}

function2(parámetro1, parámetro2)
{
//código función 2
}

function3(parámetro3)
{
//código función 3
}
</script>

Y lo que quieres conseguir es que primero se haga la función 2, luego la 1 y finalmente la 3, tendrás que hacer algo así:

<script language="Javascript">

functionQueLoHaceTodo(parámetro1, parámetro2, parámetro3)
{

//código función 2

//código función 1

//código función 3
}

</script>

No te tiene que resultar muy complicado, pero si no sabes hacerlo y te lo hago yo no vas a aprender! Si no te aclaras vuelve a postear y te ponemos la solución.

Hola yo nuevamente, es que no logro que funcione, el problema lo tengo en onSelect ya que si lo cambio asi los dos los use con el mismo nombre no me funciona uno de los dos, necesito una pista desde ya muchas gracias

crujikoki · #5 (**permalink**) 16/11/2009, 04:56

Hola,

Me imagino que lo que te pasa es que le estás diciendo que para un mismo evento te haga 3 cosas distintas y supongo que le navegador estará flipando.

Me puedes poner el HTML? Lo digo por que así si te lo hago en el tuyo mismo te irá mejor para que veas que he hecho (a parte de que tampoco voy muy sobrado de tiempo ahora mismo :P).

Saludos.

arielgon · #6 (**permalink**) 01/12/2009, 11:28

Cita:

Iniciado por crujikoki

Hola,

Me imagino que lo que te pasa es que le estás diciendo que para un mismo evento te haga 3 cosas distintas y supongo que le navegador estará flipando.

Me puedes poner el HTML? Lo digo por que así si te lo hago en el tuyo mismo te irá mejor para que veas que he hecho (a parte de que tampoco voy muy sobrado de tiempo ahora mismo :P).

Saludos.

Hola, disculpa la demora pero no estube por aqui, ahi va html

html>
<head>

<script src="recorte/jquery.min.js"></script>
<script src="recorte/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="recorte/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="recorte/demos.css" type="text/css" />
<link rel="stylesheet" href="style/design.css" type="text/css" />
<link rel="stylesheet" href="styles/uno.css" type="text/css" media="screen" />
<script language="Javascript">

$(function(){

$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});

});

function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};

</script>

</head>

<body>
<div id="container">
<div id="header">

</div>
<?php
if($ariel==0){
?>
<div class="article" align="center">
<h1></h1><p>
<table>
<tr>
<td>

<img src="albunes/<?=$line["user"]?>/<?="sml_".$line["imagen"]?>" id="cropbox" />
</td>
<td>
<div style="width:100px;height:100px;overflow:hidden;">
<img src="albunes/<?=$line["user"]?>/<?="sml_".$line["imagen"]?>" id="preview"/>
</div>

</td>
</tr> </table>


<form action="" method="post" onsubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="Cambiar" /> <a href="perfiles.home.php?id=<?=$id?>">Volver</a>
</form>
</div>
<?}else{?>
<div class="article" align="center">
<img src="albunes/<?=$line["user"]?>/sml_<?=$imagen?>"/><br>
<b>La foto de tu perfil fue editada <a href="perfiles.home.php?id=<?=$id?>">Volver a mi Perfil</a></b>
</div>
<?};?>
</div>
</body>

</html>

crujikoki · #7 (**permalink**) 10/12/2009, 04:54

Hola,

Siento el retraso, pero ahora mismo no estoy teniendo mucho tiempo para mirar el foro. Postea de nuevo si aun estás interesado en solucinar el problema y a ver si alguien puede ayudarte. Siento no haberte servido de mucha ayuda.

Saludos.

arielgon · #8 (**permalink**) 13/12/2009, 08:12

Cita:

Iniciado por crujikoki

Hola,

Siento el retraso, pero ahora mismo no estoy teniendo mucho tiempo para mirar el foro. Postea de nuevo si aun estás interesado en solucinar el problema y a ver si alguien puede ayudarte. Siento no haberte servido de mucha ayuda.

Saludos.

Ante Todo gracias por la atencion, y luego lo volvere a postear porque efectivamente aun no he podido solucionarlo, pero yo tambien ahora estoy corto de tiempo, asi que lo hare mas adelante. Saludos