SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery image dimensions

    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
    Last edited by paul_wilkins; May 8, 2011 at 21:54. Reason: fix spelling of thread title

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, thanks for your reply.

    I have created a test page here:

    www.theclassifiedsband.co.uk/testpage

    And here is the jQuery script:
    Code:
    $(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
    Last edited by mickyginger; May 9, 2011 at 04:43. Reason: did not correctly tag url

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mickyginger View Post
    I have created a test page
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I forgot to upload the images. They're up now. Still getting the same results.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mickyginger View Post
    Yeah, I forgot to upload the images. They're up now. Still getting the same results.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah ha! That makes sense. Thanks for that Paul, I'll give it a whirl.

    Mike

  8. #8
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    $(document).ready(function(){
      $('.thumb img').each(function(){
      $(this).load(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').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. #9
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Red face

    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •