Getting Width And Height Of A Dynamic Image

I have a img tag embedded inside a hidden div. When the user clicks on a dynamic hyperlink, having the image name, the image has to be showed in a modal window. For positioning the

Solution 1:

try this.

var img = $("imgFull")[0]; // Get my img elemvar real_width, real_height;
    $("<img/>") // Make in memory copy of image to avoid css issues
        .attr("src", $(imgFull).attr("src"))
        .load(function() {
            real_width = this.width;   // Note: $(this).width() will not
            real_height = this.height; // work for in memory images.
        });

thanks.

Solution 2:

Mmmm, the problem is that you can't know the size of an image that hasn't been loaded yet. Try this:

functionShowImage(imgSrc) {
  $("#imgFull").attr("src", imgSrc);
  $("#imgFull").load(function(){  //This ensures image finishes loadingalert($("#imgFull").height());
     $("#imgFullView").width($("#imgFull").width());
     $("#imgFullView").height($("#imgFull").height());
     show_modal('imgFullView', true);
  });
}

With .load() we ensure the image finishes loading before trying to get its size()

Hope this helps. Cheers

Solution 3:

This has worked for me in the past:

functionShowImage(imgSrc){
 $('<img id="imgFull" />').bind('load',
    function(){
        if ( !this.complete || this.naturalWidth == 0 ) {
            $( this ).trigger('load');      
        } else {
            $( this ).appendTo('#imgFullView')
$('#imgFullView').width(this.naturalWidth).height(this.naturalHeight);
        }    
    }).attr("src",imgSrc);   
}

$(document).ready(function(){ ShowImage('http://www.google.com/images/logos/ps_logo2.png') });

demo here:

http://jsfiddle.net/jyVFc/4/