jQuery image dimensions

JavaScript
1

Hi there,

So I’m working in a project where I need to get the dimensions of an image. If I use .height() of the image I get 0 returned, but if use .height() on its surrounding div I get the image’s height returned.

I need the height and width of the actual image, what should I do?

Many thanks,
Mike

2

You could use the native JavaScript .clientHeight and .clientWidth, but they include the CSS padding too.

Can you please link us to a test page where your image .height() isn’t working as expected? Perhaps we can help to debug the problem for you.

3

Hi Paul, thanks for your reply.

I have created a test page here:

www.theclassifiedsband.co.uk/testpage

And here is the jQuery script:


$(document).ready(function(){
  $('.thumb img').each(function(){
    var width = $(this).width();
    var height = $(this).height();
    if (width > height){ //landscape
      imgHeight = 50;
      imgWidth = width/height*50;
    } else { //square or portrait
      imgHeight = height/width*50;
      imgWidth = 50;
    }
  $(this).css({height: imgHeight, width: imgWidth});
  });
  
  alert($('.thumb img:first').height());
	
  $('.thumb').click(function(){
    var src = 'url(' + $(this).children(':first').attr('src') + ')';
    $('#photoframe').css({backgroundImage: src, backgroundRepeat: 'no-repeat', backgroundPosition: 'center'});
  });
});

As you can see, I’m trying to create thumbnails for a set of gallery images. I have already tried using the javascript clientHeight and clientWidth with the same result. I get 0 returned.

Many thanks in advance,
Mike

4

It seems that no images (not even thumbnails) are loading on the test page.
That’s the most likely reason why you’re getting 0 for height and width right now.

When you have images on there, we can then investigate things further from there.

5

Yeah, I forgot to upload the images. They’re up now. Still getting the same results.

6

Okay - now we see that the code is running before the image has finished loading. If the image hasn’t finished loading, there is no width or height information available for it.

What you can do about that is to assign a function to the load event of the image. If the image is already loaded, or when the image has finished loading, that function will then run.

Or, you can wait for the whole page (document.body) to finish loading, at which point you can run your code as a whole.

7

Ah ha! That makes sense. Thanks for that Paul, I’ll give it a whirl.

Mike

8

Hi again Paul,

So I would prefer to assign a function to the load event of the image, but I’m having difficulty. I have changed my code to add a load function:


$(document).ready(function(){
  $('.thumb img').each(function(){
  [b]$(this).load(function(){[/b]
      var width = $(this).width();
      var height = $(this).height();
      if (width > height){ //landscape
        imgHeight = 50;
        imgWidth = width/height*50;
      } else { //square or portrait
        imgHeight = height/width*50;
        imgWidth = 50;
      }
	
	  $(this).css({height: imgHeight, width: imgWidth});
	});
  });
  
  alert($('.thumb img:first').clientHeight());
	
  $('.thumb').click(function(){
	var src = 'url(' + $(this).children(':first').attr('src') + ')';
	$('#photoframe').css({backgroundImage: src, backgroundRepeat: 'no-repeat', backgroundPosition: 'center'});
  });
});

But the script is still running before the images are loaded. Any ideas?

Many thnaks,
Mike

9

Forget my last post, something to do with the way I uploaded the script to the test page caused it to not link the script to the page locally. Not sure why, anyway, the .load() function work great.

Thanks again for your help.

Mike.