jQuery/javaScript : images don't load

Question

I have the following code:

all_images = new Array(Array);
$.get('../dotclear-files/themes/biblio/js/dynamic_ajax_php.php', function(data) {
    var w = 0;
    $(data).find('image').each(function() {
        if (!all_images[w]) all_images[w] = new Array();
        all_images[w]['url'] = $(this).find('url').text() + '#comments';
        all_images[w]['src'] = $(this).find('src').text();
        all_images[w]['title'] = $(this).find('title').text();
        all_images[w]['width'] = $(this).find('width').text();
        all_images[w]['height'] = $(this).find('height').text();
        w = w + 1;
    });
    $("#carousel-comments").append('<ul></ul>');
    for (x=0; x<3; x++) {
        $('#carousel-comments ul')
            .append('<li>')
            .append('<a href="' + all_images[x]['url'] + '#comments" title="' + all_images[x]['title'] + '">')
            .append('<img alt="' + all_images[x]['title'] + '" class="jcarousel-img jcarousel-img-' + x + '" width="' + all_images[x]['width'] + 'px" height="' + all_images[x]['width'] +'px" />')
            .append('</a>')
            .append('</li>');
        var img = new Image();
        $(img)
            .load(function() {
                $('.jcarousel-img-' + x)
                    .attr({'src': all_images[x]['src'], 'alt': all_images[x]['title']})
                    .fadeIn();
                })
            .attr('src', all_images[x]['src']);
    }
    $('#carousel-comments').jcarousel('reload');
}, 'xml');

The first part of this code loads images from a PHP script, that returns an XML file. This part works fine.

The issue comes with the 2nd part: $(img).load(...) It never displays my images.

This can be seen on my test page : it's the 3rd carousel, under the title named "C'est vous qui le dites!" We can see that the titles of the images are displayed... but the images themselves aren't loaded.

What am I doing wrong?

Thanx for any help!

Answer 1

I think you must append the <img> to the carousel.

$(img).appendTo($("#carousel-comments"));

Or something like this.

Edit after the comments exchange:

The element <IMG> in your LI are not the same that your var img = new Image . Then try something like this:

for (x=0; x<3; x++) {
    var img = new Image();
    img.load(function() {
        $(this).fadeIn();

        // Also, set your carousel here        
    });

    img.attr('alt', all_images[x]['title'])
        .attr('width', all_images[x]['width'])
        .attr('height', all_images[x]['height'])
        .addClass('jcarousel-img jcarousel-img-' + x)
        .attr('src', all_images[x]['src']);

    $('#carousel-comments ul')
        .append('li')
        .append('<a href="' + all_images[x]['url'] + '#comments" title="' + all_images[x]['title'] + '">')
        .append(img);
}