Добавление элементов в контейнер с изотопами приводит к перекрытию изображений

Я реализовал изотоп jquery в своей галерее изображений.
В галерее у меня есть форма загрузки изображения, после загрузки изображения пользователем я возвращаю объект Json с данными о загруженном изображении.
На основе этих данных я хочу добавить новое изображение в контейнер с изотопом.
Я пробовал несколько способов, но все они терпят неудачу.
Последний добавляет изображение в контейнер, но новое изображение находится ниже старого изображения.
Я должен что-то упустить, но могу' не могу найти что.
введите здесь описание изображения

$("#ajaxUploadForm").ajaxForm({
...
success: function (result) {
                var $container = $('#container');
                var $newItems = $('<div class="imgItem"><a class="fancybox-button" rel="fancybox-button" href="' + @Url.Content("~/") + result.messageOriginal+ '"> <img src="'+ result.message +'" /> </div></a>');

                $container.prepend($newItems).isotope('reloadItems').isotope({ sortBy: 'original-order' });
...

Вот как я загружаю элементы, когда пользователь открывает страницу

$(window).load(function () {
        var $container = $('#container');

        $container.isotope({
            itemSelector: '.imgItem',
            filter: '*',

            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
...

И это шаблон для каждого элемента:

<div class="imgItem">
                <a class="fancybox-button" rel="fancybox-button" 
           href="@Url.Content("~/" + @i.Media.PathOriginal)" 
           >
                    <img src="@Url.Content("~/" + @i.Media.PathMedium)" alt="" />
                </a>
            </div>

jquery jquery-plugins jquery-isotope jquery-masonry
person 1110    schedule 15.09.2012    source источник
comment
Когда вы добавляете (добавляете) новые элементы в контейнер Isotope, Isotope нуждается в ширине и высоте элемента, чтобы разместить их правильно. См. параметр imagesLoaded и как загружать и добавлять новые элементы с помощью Ajax.   -  person Systembolaget    schedule 15.09.2012

Ответы (2)


arrow_upward
1
arrow_downward

Я столкнулся с той же проблемой. Поэтому я обернул его плагином для загрузки изображений следующим образом.

$('#container').imagesLoaded( function(){
        $('#container').isotope({
          // options
          sortBy : 'random',
          layoutMode: 'masonry',
          itemSelector : '.imgItem'
        });
    });

И это сработало.

person Amit Kumar Gupta    schedule 24.05.2013

arrow_upward
0
arrow_downward

Попробуйте с

var $newItems = $('<div class="imgItem" style="float:left;"><a class="fancybox-button"....
person Gautam3164    schedule 15.09.2012