Используйте Isotope с объектами, загруженными в XML и jQuery. Это возможно? - PullRequest
Новая
       9

Используйте Isotope с объектами, загруженными в XML и jQuery. Это возможно?

1 голос
/ 11 марта 2012

У меня есть объекты, которые я загружаю с помощью XML и jQuery и пытаюсь подключить к изотопу, но, похоже, это не пойдет. Это возможно? Я пробовал много разных решений, но не могу найти то, что работает. Это то, что у меня есть. Я пробовал функцию обратного вызова в изотопе, но все еще не повезло .. Я звоню в своем классе с XML, и в результате получается следующее: firebug: item yellow, item red , item blue и т. Д. 

    var $container = $('#container');
    var $checkboxes = $('#filters a');

    $container.isotope({
    itemSelector: '.item',
    transformsEnabled: false,
    animationOptions: {
    duration: 4000,
    easing: 'easeInOutQuad',
    queue: false,
    complete: complete()
    }
    });


    function complete(){
           $.get('sites.xml', function (d) {

    $(d).find('site').each(function () {
        // var id = $(this).attr('id');
        var imageUrl = $(this).find('imgurl').text();
        var title = $(this).find('title').text();
        var url = $(this).find('url').text();
        var brief = $(this).find('brief').text();
        var long = $(this).find('long').text();
        var classa = $(this).find('_class').text();

    $('<div class="' + classa + '"></div>').html('<a href="' + url + '"> 
        <img  src="' + imageUrl + '" class="thumbnail" />' + '<h1>' + title + '</h1> 
        </a>').appendTo('#container');

        });

     });

        }

1 Ответ

2 голосов
/ 11 марта 2012

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

  • сделайте свой ajax
  • в успешном обратном вызове, добавьте элементы в DOM
  • затем инициализируйте изотоп (последний шаг в ajax-success)

edit: к вашему вопросу в комментарии: я не уверен, понимаю ли я, о чем вы спрашиваете.Поскольку нет jsfiddle или чего-то еще, я должен был сделать предположения на сумму:

  • ваш контейнер пуст
  • вы загружаете некоторый xml, анализируете его и генерируете элементы, которые вы хотите иметь в изотопе
  • ваш код выглядит так, как будто вы инициализируете изотоп в пустом контейнере - затем добавляете элементы.

мое решение: 

var $container = $('#container');
var $checkboxes = $('#filters a');

init();

function init(){
    $.get('sites.xml', function (d) {

        $(d).find('site').each(function () {
            var imageUrl = $(this).find('imgurl').text();
            var title = $(this).find('title').text();
            var url = $(this).find('url').text();
            var brief = $(this).find('brief').text();
            var long = $(this).find('long').text();
            var classa = $(this).find('_class').text();

            $('<div class="' + classa + '"></div>').html('<a href="' + url + '"> 
            <img  src="' + imageUrl + '" class="thumbnail" />' + '<h1>' + title + '</h1> 
            </a>').appendTo('#container');

            }); // end each

        initIsotop(); // after adding all elements - init isotop
    }); // end $.get
}

function initIsotop() {
    $container.isotope({
        itemSelector: '.item',
        transformsEnabled: false,    
        animationOptions: {
            duration: 4000,
            easing: 'easeInOutQuad',
            queue: false
        }
    });
}
...