Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have an image wrapper div to contain image and caption.

Using the following the image wrapper div is sized to be the width of the image:

$('.imgright').each(function(){
    $(this).width($(this).find('img').outerWidth());
});

I also wish to use a different image path if dependant on a parent div class. The following works:

$('.grid_12').each(function(){
    $(this).find('img').each(function(){
        $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    });
});

But putting these together does not always set the width of the image wrapper div. 

$('.grid_12').each(function(){
    $(this).find('img').each(function(){
        $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    });
});
$('.imgright').each(function(){
    $(this).width($(this).find('img').outerWidth());
});

Any suggestions?

Thanks to 2 very quick answers I have restructured my code and used the .load function to get the changed image details.

Working code is: $('.grid_12').each(function(){ $(this) .find('img') .each(function(){ $(this) .attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); $(this) .load(function(args){ var newWidth = $(this).outerWidth(); $(this).parent('.imgright') .each(function(){ $(this).width(newWidth); }) }) }) });

share|improve this question

2 Answers

up vote 0 down vote accepted

Could it be that the images have not loaded yet? You could add a load handler to the image as you change the ImagePath

$('.grid_12').each(function(){
  $(this).find('img').each(function(){
    $(this).attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
    $(this).load(function(args){/* find the parent div and change size */});
  });
});
share|improve this answer
Thank you for your very quick reply. Yes, i had guessed that the changed image had not loaded but did not know what I could do. I have amended my code to use your suggestion of .load(function(args) – chrisk Apr 20 '11 at 15:22
up vote 0 down vote

For starters, you can leverage chaining to make your code a bit more succinct:

$('.grid_12').each(function(){
    $(this)
        .find('img')
            .each(function(){
                $(this)
                      .attr("src", $(this).attr('src').replace('/StandardImage/','/MidSizeImage/')); 
            })
            .end()
        .width($(this).find('img').outerWidth());
});

Now, as to your problem, what's happening is that you are loading an image (by changing it's src) and then immediately trying to get its dimensions without first checking to see if the image had finished loading yet.

It looks like this question may help steer you in the right direction:

How can I determine if an image has loaded, using Javascript/jQuery?

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.