CODEWITHSUNDEEP
jqueryasp.nethtml
Raghav
Raghav

Reputation: 3058

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 div inside the modal window, the image height is required. But when the hyperlink is clicked, the after the src is assigned, the height is coming as 0. So the image cannot be aligned in the middle. Please help me to get the width of the image before the it is shown in the browser.

<div id="imgFullView" class="modal_window imgFullView">
    <img alt="Loading..." id="imgFull" />
</div>

function ShowImage(imgSrc) {
    $("#imgFull").attr("src", imgSrc);
    alert($("#imgFull").height());
    $("#imgFullView").width($("#imgFull").width());
    $("#imgFullView").height($("#imgFull").height());
    show_modal('imgFullView', true);
}

This showimage method would be called onclick of the hyperlink. Thanks in Advance...

Solution that worked for me, after all your professional guidance...

 function ShowImage(imgSrc) {
    $("#imgFull").removeAttr("src"); //To remove the height and width of previously showed imaged from img tag.
    $("#imgFull").attr("src", imgSrc);
    $("#imgFullView").width(document.getElementById("imgFull").width);
    $("#imgFullView").height(document.getElementById("imgFull").height);
    show_modal('imgFullView', true);
 }

Upvotes: 4

Views: 10905

Answers (3)

Jeremy Battle
Jeremy Battle

Reputation: 1638

This has worked for me in the past:

function ShowImage(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/

Upvotes: 1

Chandresh M
Chandresh M

Reputation: 3828

try this.

    var img = $("imgFull")[0]; // Get my img elem
    var 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.

Upvotes: 10

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

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

function ShowImage(imgSrc) {
  $("#imgFull").attr("src", imgSrc);
  $("#imgFull").load(function(){  //This ensures image finishes loading
     alert($("#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

Upvotes: 1

Related Questions