Cycle Plugin only works if there is predefined?

Question

I have following to do the photo slideshow:

$('#Yeah').click(function() {
    {% for photo in photos %}
    $('#slideShow').append('<img src="/image?blob_key={{ photo }}" />');
    % endfor %}

    $('#slideShow').cycle({ 
      fx:     'fade',
      speed:  300, 
      next:   '#slideShow', 
      timeout: 0 
    });
});

When I have empty img tag under the div tag, the slideshow won't work at all.

<div id="slideShow">

</div>

However, if I at least add one img tag under the div tag, it works with the same codes.

<div id="slideShow">
    <img class="pics" width="200" height="200"> 
</div>

Does anyone have any clue what's the problem ? Any helps are appreciated.

Answer 1

I think that the problem is that the images are not fully loaded before the Cycle plugin is initialized.

Looking through the source of the "lite" version, I see:

    $slides.each(function() {
        var $el = $(this);
        this.cycleH = (opts.fit && opts.height) ? opts.height : $el.height();
        this.cycleW = (opts.fit && opts.width) ? opts.width : $el.width();
    });

Because you do not specify the width and height options, it defaults to the width and height of the <img> element, which are both 0 when the image is not fully loaded.

EDIT: Try:

    var imgEls = $([]);

    {% for photo in photos %}
    imgEls = imgEls.add($('<img src="/image?blob_key={{ photo|urlencode }}" />'));
    {% endfor %}

    var numLoaded = 0;
    imgEls.load(function () {
        ++numLoaded;

        if (numLoaded == imgEls.length) {
            $('#slideShow').cycle({ 
                fx:     'fade',
                speed:   300
            });
        }
    });

    imgEls.appendTo($('#slideShow'));

EDIT2: There is a syntax error:

$(this\).ajaxSubmit(options);

needs to be:

$(this).ajaxSubmit(options);
//    ^ No backslash character '\'