Calculating width after css height resize - php

Question

I'm building a page of horizontal images pulled from XML
When the images load they take on the screen height minus a small value to give some room.
I'm grabbing the widths of the images so I can add them up and set the width of the div container.
At the moment the total width is the size of the full unresized images leaving a blank space at the end of the last image. How can I grab the width of all the resized images?
Here is my code
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "xml.xml",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(xml) {
var $heightb = $(window).height() - 45;
var $widthb = 0;
$(xml).find("image").each(function () {
$url = $(this).attr("url");
$(".main").append('<div class="image" style="height='+$heightb+'px"><div class="title"><img height="'+$heightb+'px" src="' + $url + '" title="' + $(this).attr("desc") + '" /></div><div class="description">' + $(this).attr("desc") + '</div></div>');
$(".image").fadeIn(1000);
$widthb += $(".image").width();
});
$(".main").css('width', $widthb);
}
The page I'm working on is http://www.spitznagel.ch/mobile.php

Answer 1

You can probably just create the element for each image and get its size before appending it. Something like this (untested code; hopefully you get the idea)
function xmlParser(xml) {
var $heightb = $(window).height() - 45;
var $widthb = 0;
var imgDiv;
var width;
$(xml).find("image").each(function () {
$url = $(this).attr("url");
imgDiv = $('<div class="image" style="height='+$heightb+'px"><div class="title"><img height="'+$heightb+'px" src="' + $url + '" title="' + $(this).attr("desc") + '" /></div><div class="description">' + $(this).attr("desc") + '</div></div>');
$(".main").append(imgDiv);
width = imgDiv.width();
imgDiv.fadeIn(1000);
$widthb += width;
});
$(".main").css('width', $widthb);
}