Getting the height of the image to set modal window size

Question

I am creating a photo gallery with thumbnails and loads the resized image into the modal window.

The problem is I want to get the height and width of the image to set the height of the modal window, however the height is not being set on the modal window or my container for my image.

The src of the image is not in my markup originally but I add it to the markup by appending it on the fly.

Original Thumbnail Image

    <img src="\images\picture1.jpg" height="150" width="150" id="thumbnail">

Jquery code:

    var tImageID    = $(this).find('img').attr( 'id', 'thumbnail' );
    var fullURL     = $(tImageID).attr('src');
    var dFigure     = $('#dialog-media figure .media');

    //  fullSrcURL  = "\images\picture_resized.jpg"
    var fullSrcURL = fullURL.replace(".jpg", "_resized.jpg"); 


    // Add html to the div tag
    $(dFigure).append('<img id="resized-pic" src="' + fullSrcURL + '" alt="' + $(tImage).attr('alt') + '" />');


     var objHeight = $("#resized-pic").height();
     var objWidth  = $("#resized-pic").width();

     // Perform some other code here
     // Some more logic

     //Set the positioning of the modal window with theses CSS properties
     $('.ui-dialog').css('left', '0');
        $('.ui-dialog').css('right', '0');
        $('.ui-dialog').css('margin', '0 auto');
        $('.ui-dialog').css('width', objWidth);
        $('.ui-dialog').css('height', ObjHeight);   
        $('.ui-dialog').css('top', '5%');

The picture loads up, but the objWidth and objHeight show up as zero when looking at firebug.

I refresh my page, click on the same thumbail and the picture loads up with the image within the modal and the height of the modal is set properly.

Is it because the picture hasn't completely loaded and that is why it is zero? Or is it because it is cached?

Thanks

Cheers

I'm guessing its because the images are still loading. Take a look at my answer and if that doesn't work can you make a fiddle that demonstrates the problem? http://jsfiddle.net/ — Trevor, Oct 02 '13 at 22:48
Another thing I noticed is `ObjHeight` is capitalized instead of `objHeight` when setting the css. Don't think thats your problem though. Can you make a fiddle for me demonstrating the problem? — Trevor, Oct 02 '13 at 22:55

score 2 · Accepted Answer · answered Oct 07 '13 at 15:52

@Trevor

I found out i needed this code:

        image= new Image();
        image.onload = onLoadHandler;  // Checks to ensure the image has been loaded
        image.src=fullSrcURL;

        function onLoadHandler() {

           //Put in logic here once the image has been loaded

        }

Getting the height of the image to set modal window size

1 Answers1