Calcular ancho y alto de una imagen

[santdavalos]

Buenas, soy un lector constante del foro, es la primera vez que escribo, y nada mas porque no encontre un tema muy especifico a lo que busco, al tema, mediante jquery quiero obtener el ancho de varias imagenes, sumarlas entre si, y asignarle a un div contenedor de las imagenes.
Mi codigo es el siguiente:

Código:

<script type="text/javascript">
	$(document).ready(function(){
		$('.content-item').each(function(){
			var intImgWidthHor = $('.hor').width();
			var intCountHor = $('.hor').length;
			var intTotalHor = intImgWidthHor * intCountHor;
				
			var intImgWidthVer = $('.ver').width();
			var intCountVer = $('.hor').length;
			var intTotalVer = intImgWidthVer * intCountVer;

			$('.content-item').css({width: intTotalHor + intTotalVer + 'px'});
		});
	});
</script>

Y la galeria es la siguiente:

Código:

<div class="content-item">
	<img class="hor" src="images/fede.jpg" />
	<img class="hor" src="images/fede.jpg" />
	<img class="hor" src="images/fede.jpg" />
	<img class="ver" src="images/prueba.jpg" />
	<img class="ver" src="images/prueba.jpg" />
	<img class="ver" src="images/prueba.jpg" />
</div>

en el servidor local me funciona, pero al subirlo no.. algun error o una mejor manera de hacer, lo agradeceria!

[goteen_mx]

Si en el servidor local te funciona y en el de producción no, verifica que tengas las mismas librerias jquery y las que ocupes con la misma versión o que existan todas.

Ahora, también puedes sacar un factor de escala para que todas las imagenes sean del mismo tamaño y asi sería más sencillo y ser vería más ordenado.

Saludos.

[Perr0]

prueba este script (no es JQuery)

y saca de ahi los datos

Código Javascript:

<script>
window.onload=function(){
    r="";
    im=document.getElementsByTagName("img")
    for(i=0;i<im.length;i++){
        ancho=im[i].width;
        altura=im[i].height;
        r=r+"ancho: "+ancho+" - altura: "+altura+"<br>";
    }
    x=document.createElement("div");
    x.innerHTML=r;
    document.body.appendChild(x);
}
</script>
 

salu2

[santdavalos]

gracias! lo probare mañana temprano!

[caricatos]

Hola:

Para obtener ese dato de forma fiable, debemos asegurarnos que las imágenes estén completamente cargadas... se podría programar el evento load, aunque me ha dado mejores resultados el chequeo de su atributo complete de forma temporizada (setTimeout)

Saludos

[santdavalos]

Al final lo resolvi asi, me parece un poco tosco pero me funciona por el momento! gracias gente!

Código Javascript:

<script>
            window.onload=function(){
                img = document.getElementsByClassName("width-hor")
                for(i=0;i<img.length;i++){
                    widthHor=img[i].width;
                    countHor = img.length;
                    totalHor = widthHor * countHor;
                }
                img = document.getElementsByClassName("width-ver")
                for(i=0;i<img.length;i++){
                    widthVer=img[i].width;
                    countVer = img.length;
                    totalVer = widthVer * countVer;
                }
                totalWidth = totalVer + totalHor;
                alert(totalWidth);
                $('.content-item').css({width: totalWidth + 'px'})
              }
        </script>