Подтвердить что ты не робот

Проблемы с плагином изотопа JQuery

Я пытаюсь настроить изотоп на этом сайте, он должен обрабатывать макет, и мне нужно иметь возможность добавлять элементы в контейнер.

Проблема заключается в том, что он, похоже, не правильно инициализирует изображения, вот как я его инициализирую:

$(document).ready(function(){

    var $container = $('#container');
    $container.isotope({
          masonry: {
            columnWidth: 400,
            gutterWidth: 10
        },
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: true
        },
        resizesContainer: true,
    });

    load_more();
});

Изображения полностью не затронуты параметрами кладки, и если я укажу "Ширина" в моем CSS, у меня возникают проблемы с загрузкой.

load_more преформирует ajax-вызов и при успешном вызове эта функция возвращает данные:

function data_loaded(data) {

    var newItems = "";
    for (var i = 0; i < data['posts'].length; i++) {
        newItems += '<div class="item" ><img class="gallery_img" src="'+data['posts'][i]['images'][0]['path']+'" /></div>';
    }

    /* append images*/
    var $newItemsObj = $(newItems);
    $('#container').isotope( 'insert', $newItemsObj );
}

Сайт http://www.hotchinesebabes.com/ Сайт безопасен для работы, нет обнаженных изображений

Также кажется, что сайт нуждается в обновлении для правильной загрузки, я думаю, что изображения улавливаются во второй раз, поэтому он не работает в первый раз из-за запуска изотопа до загрузки изображения?

4b9b3361

Ответ 1

Изотоп не работает, потому что ваши изображения еще не загружены, поэтому ширина и высота изображений равны 0. Используйте https://github.com/desandro/imagesloaded или исправьте высоту и ширину ваших изображений с помощью CSS.