问题
I have objects I am loading in with XML and jQuery and trying to hook on to Isotope, but is seems it's a no go. Is this possible? I've tried many different solutions but can't seem to find one that works. This is what I have. I've tried a callback function in isotope, but still no luck.. I am calling in my class with the XML and the result is this in firebug: item yellow, item red, item blue, 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');
});
});
}
回答1:
looks like you are adding your elements to the container after the animation is completed. I think it has to be the other way around: on page ready:
- do your ajax
- in the success-callback add the elements to the DOM
- then initialize isotope (last step in the ajax-success)
edit: to your question in the comment: I'm not sure if I understand what your asking for. Since there is no jsfiddle or something I had to make sum assumptions:
- your container is empty
- you load some xml, parse it and generate elements you want to have in isotope
- your code looks like you initialize isotope on an empty container - then add elements.
my solution:
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
}
});
}
来源:https://stackoverflow.com/questions/9657632/use-isotope-with-objects-loaded-in-with-xml-and-jquery-is-this-possible