Question

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>

Answer 1

Set a call back on the .load()

$('div#photo_container'+photoID).load('get_photo.php', function(){
    setImageDimensions(photoID);
});