javascript jcarousel: making it work with portrait and landscape images

Question

Hi, Ive had a problem making jcarousel work with portrait and landscape images. I am currently using the following code to do this, plus a few modifications in jcarousel so an extra variable gets carried and used to set the item widths.

function mycarousel_itemAddCallback(carousel, first, last, dir)
{
    var thumbdir = 'gallery/' + dir + '/thumbs/' //set the thumbs dir
    var fulldir = 'gallery/' + dir + '/full/' //set the full images dir
    for (i = 0; i < 21; i++) {
        var no = i+1; //number image we are on
        var fullimg = fulldir + no + '.jpg'; //set full images source
        var img = new Image(); //make a new image
        img.src = thumbdir + no + '.jpg'; //set its source
        var html = mycarousel_getItemHTML(img.src, fullimg, img.width); //make some html for the image, with width
        carousel.add(i+1, html, img.width); //add the image to the carousel, with width passed in
        tagID = 'jcarousel-item-' + no; //get the class tag of the image just added
        changeStyle(tagID, img.width); // force its height in inline css to prevent bugs
    }
carousel.size(21);

};

this works, but for the first time the page is loaded, img.width ends up being 0 because the image hasn't loaded before its height is asked. I have been suggested to use this to allow the image to load before proceeding

function mycarousel_itemAddCallback(carousel, first, last, dir)
{
    var thumbdir = 'gallery/' + dir + '/thumbs/' //set the thumbs dir
    var fulldir = 'gallery/' + dir + '/full/' //set the full images dir
    for (i = 0; i < 21; i++) {
        var no = i+1; //number image we are on
        var fullimg = fulldir + no + '.jpg'; //set full images source
        var img = new Image(); //make a new image
        img.onload = (function(a,b,c){ return function(){ addimage(a,b,c) }; })(i, img, fullimg);
        img.src = thumbdir + no + '.jpg'; //set its source
    }
carousel.size(21);

};
function addimage(i, img, fullimg) {
    var html = mycarousel_getItemHTML(img.src, fullimg, img.width); //make some html for the image, with width
    carousel.add(i+1, html, img.width); //add the image to the carousel, with width passed in
    tagID = 'jcarousel-item-' + no; //get the class tag of the image just added
    changeStyle(tagID, img.width); // force its height in inline css to prevent bugs

but this doesn't seem to work at all, all the images end up as white boxes, and even they are not the correct size. I have checked, and all the variables are passed though correctly, the html generated is correct, which suggests the problem occurs with carousel.add here. But I cant see why it would be going wrong, given that carousel.add worked in the previous sample, even if all the widths were wrong until the page was refreshed

sorry if its something stupid, I'm very new to javascript, this is really my first serious go.

Hope someone can help! Thanks in advance!