Obtaining height and width of an image changing source attribute, jQuery
<p>I have a very simple image gallery in which one large image is displayed at a time. I have a large caption to the right of the main image that I am trying to position close to the image itself. When the main image is horizontal, the caption is on the far right. When the main image is vertical, the caption is about 30px from the right of its DIV.</p>

<p>When a thumbnail is clicked, a new image is created and loaded. I am trying to then change the source attribute of the main image, obtain its dimensions, and position the caption accordingly. But when I click on an image of another size, it seems to only show the dimensions of the previous image. If I click that same image again, it works.</p>

<p>Here is the jQuery-</p>

<pre><code>$("#apparatus_thumbs a").click(function() {
            var src = $(this).attr("href");
            var caption = $(this).attr("title");
            var wrap = $("#apparatusPhoto").fadeTo("medium", 0.5);
            var img = new Image();
            $(img).load(function() {
                wrap.fadeTo('fast', 1);
                $("#apparatusPhoto").attr('src', src);
                var height = $("#apparatusPhoto").height();
                var width = $("#apparatusPhoto").width();
                if (height &gt; width) {
                    $("#apparatusPhotoCaption").css('right', '150px');
                } else {
                    $("#apparatusPhotoCaption").css('right', '0px');
                }
                if (caption != '') {
                $("#apparatusPhotoCaption").html(caption);
                $("#apparatusPhotoCaption").fadeIn('slow');
                } else {
                    $("#apparatusPhotoCaption").fadeOut('slow');
                }
                console.log('image loaded');
            }).attr('src', src);
            return false;
        });
</code></pre>

<p>Any ideas?</p>

<p><strong>Update</strong>
This seems to work. Removed the image and then appended the new one, seems to be giving the desired results.</p>

<pre><code>$("#apparatus_thumbs a").click(function() {
            var src = $(this).attr("href");
            var caption = $(this).attr("title");
            var wrap = $("#apparatusPhoto").fadeTo("medium", 0.5);
            var img = new Image();
            $(img).load(function() {
                wrap.fadeTo('fast', 1);
                $("#apparatusPhoto").find('img').remove();
                $("#apparatusPhoto").append(img);
                var height = $("#apparatusPhoto img").height();
                var width = $("#apparatusPhoto img").width();
                if (height &gt; width) {
                    $("#apparatusPhotoCaption").css('right', '150px');
                } else {
                    $("#apparatusPhotoCaption").css('right', '0px');
                }
                if (caption != '') {
                $("#apparatusPhotoCaption").html(caption);
                $("#apparatusPhotoCaption").fadeIn('slow');
                } else {
                    $("#apparatusPhotoCaption").fadeOut('slow');
                }
                console.log('image loaded');
            }).attr('src', src);
            return false;
        });
</code></pre>
