Question

I’ve got quite the problem with jQuery and a custom photo gallery I am building. I’ve searched high and low and tried endlessly different solutions but nothing is working perfectly. So let me present the information:

This photo gallery has thumbnails on the left side and a big image in the center. Every thumbnail can be clicked which calls a function passing in its’ ID. What I want it to do is, AJAX POST to server to get image comment and image name. Fadeout the current big picture div, switch the src in the img tag, get the new image’s width, set the width of an overlaying comment div, fadeIn the big picture div.

The problem is that I can’t get the width of the new image after it has loaded (even using the a form of .load() to wait for the image to finish loading). Now I can get it to work when I fadeIn the new image and then get the width but that isn’t what I need. I need to get the width and set the div’s width before I fadeIn.

Any ideas or corrections would be great, hopefully I have provided enough information.

Here is the code I am wrestling with:

function thumbClick(val) {
    $.post('ajax.php', {
        photo_in: val
    }, function (data) {
        $('div#picture').fadeOut('slow', function () {

            //$('img#big-picture').load(function(){
            $('img#big-picture').one('load', function () {

                //alert($('img#big-picture').width());
                //will alert 0
                $('div#picture').fadeIn('slow', function () {
                    $('div#comment-box').width($('img#big-picture').width());
                    //set comment to what I want
                    $('p#comment').html("");
                    //alert($('img#big-picture').width());
                    //will alert new image width after FadeIN
                    $('p#comment').html(data.comment);
                });

            }); //end of one(load)
            $('img#big-picture').attr("src", data.newImage);


        }); //end of fadeout
    }, "json"); //end of post
}

Answer 1

I’ve encountered this before; what seems to be the easiest solution is to quickly show the image, grab it’s width, and hide it again. This operation occurs so quickly users will never notice.
In your case, i believe the code would be:

$("#big-picture").show();
alert($('#big-picture').width()); //this should be the real width, now
$("#big-picture").hide();