Append to div image and calculate it's height and set to css

Question

I have such js (also i use jQuery):

  $(".article_big_photo").click(function() {
    $('#screen').css({ opacity: 0.5, 'width':$(document).width(),'height':$(document).height()});
    $('#screen').show();
    $('#article_photo_modal').show(); 
    var image = document.createElement("img");
    var url = $(this).attr("b_img");
    $(image).attr("src", url);
    $('#article_photo_modal').css({ 'margin':$(image).height()+" 0 0 -270px"});
    $('.photo_innerbox').append(image);   
  });

but when i try to get image size, i see that it's height (according my code) is 0.

How can i append, get, and set to css image size? My code didn't work

possible duplicate of [Get real image width and height with JavaScript in Safari/Chrome?](http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome) — raam86, Aug 18 '13 at 12:37

score 3 · Accepted Answer · answered Aug 18 '13 at 12:33

you need to fetch the height after the image is loaded

$(".article_big_photo").click(function() {
    $('#screen').css({ opacity: 0.5, 'width':$(document).width(),'height':$(document).height()});
    $('#screen').show();
    $('#article_photo_modal').show(); 
    var image = document.createElement("img");
    var url = $(this).attr("b_img");
    $(image).attr("src", url); 
    $(image).load(function(){
        $('#article_photo_modal').css({ 'margin':$(image).height() +" 0 0 -270px"});
    }); 
    $('.photo_innerbox').append(image);   
});

score 1 · Answer 2 · answered Aug 18 '13 at 12:37

1

Like Arun said you must fetch the height after image load.

You can also try this:

var img = new Image();
img.src = $(this).attr("b_img");
img.height;

answered Aug 18 '13 at 12:37

raam86

6,785
2
31
46

Append to div image and calculate it's height and set to css

2 Answers2