How can I set the width and height of an ajaxed photo?
===

I have several thumbnail pics on my webpage. When a user clicks on one of the thumbnails, then the full-size pic opens up. The full-size pic may be too large for the browser window. To make it fit I have a javascript function called 'setImageDimensions()'. This function grabs the width and height for the photo, which are stored in 'hidden' input fields on the page. The problem is that when I click on the thumbnail pic, then the larger pic opens up, but it is not resized (if it is larger than the browser window). I noticed (when 'Inspecting' the HTML) that the `height` and `width` attributes are added to the full-size pic (via the `setImageDimensions()` function), but only for a split second, after which point these values are removed. What is it about my code that is preventing these attributes from 'staying'?

Javascript:

    function viewImage(photoID) {
        $('div#photo_container'+photoID).load('get_photo.php);
        // the above will load something like <img src="path-to-full-size-pic" />
        setImageDimensions(photoID);
    }

    function setImageDimensions(photoID) {
        var width = $('#photoWrap'+photoID+ ' input#photoWidth').val();
        var height = $('#photoWrap'+photoID+ ' input#photoHeight').val();

        var windowWidth = $('body').width();
        var windowHeight = $('body').height();
    
        var newWidth = width; // initialize variable
        var newHeight = height; // initialize variable
        var ratio = 1; // intialize variable
    
        if( width > windowWidth )
        {
            newWidth = windowWidth;
            ratio = newWidth / width;
            height = ratio * height;
            width = newWidth;
        
        if( height > windowHeight )
        {
            newHeight = windowHeight;
            ratio = newHeight / height;
            width = ratio * width;
            height = newHeight;
        }
        
        $('div#photo_container'+photoID+' > img').attr('height', height);
        $('div#photo_container'+photoID+' > img').attr('width', width);
        }
        else if( height > windowHeight )
        {
            newHeight = windowHeight;
            ratio = newHeight / height;
            width = ratio * width;
            height = newHeight;

        if( width > windowWidth )
        {
            newWidth = windowWidth;
            ratio = newWidth / width;
            height = ratio * height;
            width = newWidth;
        }
        
        $('div#photo_container'+photoID+' > img').attr('height', height);
        $('div#photo_container'+photoID+' > img').attr('width', width);
        }

        var halfWidth = width / 2;
        var halfHeight = (height / 2);

        $('#photo_container'+photoID).css('margin-left', -halfWidth);
        $('#photo_container'+photoID).css('margin-top', -halfHeight);
    }

HTML:
   
    <div class="photoWrap" id="photoWrap3">
        <input type="hidden" id="photoWidth" value="someWidth"/>
        <input type="hidden" id="photoHeight" value="someHeight"/>
        <div class="photo_container" id="photo_container3"></div>
        <img id="previewPic3" src="path-to-thumbnail-pic" alt="" onclick="viewImage('3')" />
    </div>