Use Isotope com objetos carregados com XML e jQuery.Isso é possível?
-
11-12-2019 - |
Pergunta
Tenho objetos que estou carregando com XML e jQuery e tentando conectar-me ao Isotope, mas parece que não é possível.Isso é possível?Eu tentei muitas soluções diferentes, mas não consigo encontrar uma que funcione.Isso é o que eu tenho.Eu tentei uma função de retorno de chamada em isótopo, mas ainda sem sorte.Estou chamando na minha classe com o XML e o resultado é esse no firebug: item amarelo, item vermelho, item azul, etc.
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');
});
});
}
Solução
parece que você está adicionando seus elementos ao contêiner depois a animação está concluída.Acho que tem que ser o contrário:na página pronto:
- faça seu ajax
- no retorno de chamada de sucesso, adicione os elementos ao DOM
- em seguida, inicialize o isótopo (última etapa do sucesso do ajax)
editar:à sua pergunta no comentário:Não tenho certeza se entendi o que você está pedindo.Como não há jsfiddle ou algo assim, tive que fazer suposições:
- seu contêiner está vazio
- você carrega algum xml, analisa-o e gera os elementos que deseja ter no isótopo
- seu código parece que você inicializou o isótopo em um contêiner vazio - depois adicionou elementos.
minha solução:
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
}
});
}