Question

$("img").click(function () {
    $("#galleryImg").html("<img src='images/full_size/" + selectedImg + "' alt='" + selectedImg + "' />");
    var imgHeight = $("#galleryImg img").height();
}

The method I’m using right now is not working and I can’t use $(this) because the image that I want the height from is different from the image I am clicking on. And to complicate it a little bit more, the image I want the height from is having its html img tag being created within the function.

The whole piece of code of the relevant area is as below

$("img").click(function () {
    $("div#blackOut").fadeTo(550, 0.8);
    $("div#whiteBox").fadeTo(550, 1);

    var browserHeight = $(window).height();
    var browserWidth = $(window).width();

    var imgName = $(this).attr("src");

    var imgArray = $(this).attr('src').split('\/');
    var selectedImg = imgArray[imgArray.length-1];

    $("#galleryImg").html("<img src='images/full_size/" + selectedImg + "' alt='" + selectedImg + "' />");

    $("#galleryImg img").load(function() {
        var thatHeight = $("#galleryImg img").height();

        alert(thatHeight);
    });

    var top = (browserHeight - (imgHeight + 50)) / 2;
    var width = imgHeight + 50;
    var marginLeft = -(width / 2);

    var top = top + "px";
    var width = width + "px";
    var marginLeft = marginLeft + "px";

    $("#whiteBox").css("top", top);
    $("#whiteBox").css("width", "width");
    $("#whiteBox").css("margin-left", "marginLeft");
});

Answer 1

You’ll need to wait for the image to load before getting its height:

$("#galleryImg").html("<img src='images/full_size/" + selectedImg + "' alt='" + selectedImg + "' />");
$("#galleryImg img").load(function() {
    var imgHeight = $(this).height();
});