Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Conocer altura de una img y luego hacer algo con ella

Estas en el tema de Conocer altura de una img y luego hacer algo con ella en el foro de Jquery en Foros del Web. Hola, necesito conocer la altura de una imagen luego que se haya cargado ya que esta se adaptará al ancho de la pantalla y luego ...
  #1 (permalink)  
Antiguo 05/03/2013, 11:55
 
Fecha de Ingreso: junio-2011
Mensajes: 478
Antigüedad: 11 años, 2 meses
Puntos: 13
Pregunta Conocer altura de una img y luego hacer algo con ella

Hola, necesito conocer la altura de una imagen luego que se haya cargado ya que esta se adaptará al ancho de la pantalla y luego tengo que hacer algo con esa altura.
Entonces:

Código Javascript:
Ver original
  1. $(window).load(function altura(){
  2.        var imagen = $('#mifoto');
  3.        var alto = imagen.height();
  4.        return alto;
  5. });

Luego llamo esta función dentro de otra:

Código Javascript:
Ver original
  1. $(function () {
  2.    var $win = $(window);
  3.    var $pos = altura();
  4.    $win.scroll(function () {
  5.       if ($win.scrollTop() < $pos)
  6.          $('#sidebar').removeClass("fijar");
  7.       else
  8.          $('#sidebar').addClass("fijar");
  9.    });
  10. });

Pero claro, la función altura solo se ejecuta cuando haya cargado la página, luego cuando la llamo ya no, entonces cómo puedo solucionar esto?

Muchas gracias! :)
  #2 (permalink)  
Antiguo 05/03/2013, 17:43
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años, 1 mes
Puntos: 1567
Respuesta: Conocer altura de una img y luego hacer algo con ella

No necesitás cargar la página, ni siquiera poner la imágen en el body, podés determinar alto y ancho previamente

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>Html5</title>
  5.  
  6. <script type="text/javascript">
  7. //<![CDATA[
  8. var alto;
  9. var ancho;
  10. var img = new Image();
  11. img.src = 'http://static.forosdelweb.com/customavatars/thumbs/avatar187409_1.gif';
  12. img.onload = function() {
  13. alto = this.height;
  14. ancho = this.width;
  15. alert(ancho + 'x' + alto);
  16. }
  17.  
  18.  
  19. function verMedidas(){
  20. alert(alto);
  21. }
  22. //]]>
  23. </head>
  24. <button onclick="verMedidas()">Alto imagen</button>
  25. </body>
  26. </html>

Al declarar las variables globales
var alto;
var ancho;
podés recuperar esas variables en cualquier otro momento

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 05/03/2013, 17:46
 
Fecha de Ingreso: junio-2011
Mensajes: 478
Antigüedad: 11 años, 2 meses
Puntos: 13
Respuesta: Conocer altura de una img y luego hacer algo con ella

Muchas gracias emprear, pero yo no necesito las medidas originales de la img, sino cuales son una vez cargada ya que las que si necesito son las de cómo queda la img al adaptarse a la resolución.

Saludos!
  #4 (permalink)  
Antiguo 05/03/2013, 17:59
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años, 1 mes
Puntos: 1567
Respuesta: Conocer altura de una img y luego hacer algo con ella

@Rapuig
A ver que no entiendo

tiene exactamente 40x50, y se cargue o no seguirán siendo las mismas
Que otras medidas puede tener una imagen? solo las que vos fuerces, ejemplo
<img src="'http://static.forosdelweb.com/customavatars/thumbs/avatar187409_1.gif'" width="300" height="300" alt="" />
Pero en ese caso, conocés las medidas, porque las definís vos, ¿entonces para que averiguarlas?.

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 05/03/2013, 20:19
 
Fecha de Ingreso: junio-2011
Mensajes: 478
Antigüedad: 11 años, 2 meses
Puntos: 13
Respuesta: Conocer altura de una img y luego hacer algo con ella

@emprear

Supongamos que la foto tiene de tamaño original 1000 x 200 (h x w) y yo estoy colocando esa foto en un contenedor cuyo width es 100% siendo este el de la pantalla, el cual no voy a conocer, entonces ahi es cuando necesito conocer la altura que esta tomando.

Saludos.
  #6 (permalink)  
Antiguo 05/03/2013, 21:50
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años, 1 mes
Puntos: 1567
Respuesta: Conocer altura de una img y luego hacer algo con ella

siguiendo tu razonamiento, primero nececitas saber el ancho de la pantalla

supongamos screen.width = 1440
vos sabés también que las imágenes se escalan proporcionalmente
es decir que para una imagen de 200 x 1000 (ancho x alto), aplicando el ancho al 100% de tus 1440

(1440 * 1000)/200 = 7200

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 05/03/2013, 21:55
 
Fecha de Ingreso: junio-2011
Mensajes: 478
Antigüedad: 11 años, 2 meses
Puntos: 13
Respuesta: Conocer altura de una img y luego hacer algo con ella

No es necesario tener que saber el ancho de la pantalla, es decir .height() te devuelve el alto de la img en ese momento, o sea no la de la original, no se si me explico. Pruébalo,

Gracias por tu ayuda.

Etiquetas: altura, conocer, img, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:16.