Cycle Plugin работает только если предопределено <img>? - PullRequest
Новая
       3

Cycle Plugin работает только если предопределено <img>?

1 голос
/ 28 августа 2011

У меня есть следующее для создания слайдшоу фотографий: 

$('#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 
    });
});

Когда у меня есть пустой тег img под тегом div, слайд-шоу не будет работать вообще.

<div id="slideShow">

</div>

Однако, если я хотя бы добавлю один тег img под тегом div, он будет работать с теми же кодами.Любая помощь приветствуется.

1 Ответ

2 голосов
/ 28 августа 2011

Я думаю, что проблема в том, что изображения загружаются не полностью до инициализации плагина Cycle.

Просматривая источник "облегченной" версии , я вижу: 

    $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();
    });

Поскольку вы не указываете параметры width и height, по умолчанию используются ширина и высота элемента <img>, которые равны 0, когда изображение загружено не полностью.

РЕДАКТИРОВАТЬ: Попробуйте: 

    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'));

РЕДАКТИРОВАТЬ2: Синтаксическая ошибка: 

$(this\).ajaxSubmit(options);

должно быть: 

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