Question

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);
 }

Answer 1

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.