$newElems.imagesLoaded is not a function When I using lightbox in Masonry - ajax

Question

I am making a music sharing website like pinterest.
I use Masonry to make the grid layout and Infinite-Scroll load the next page. When I click a music album, it pops a lightbox (using fancybox) and loads some information with ajax.
On the first page, everything goes right. But after I click one music album, closed it and scrolled down the page, the new loaded part has this problem: $newElems.imagesLoaded is not a function
I'm not sure how to fix this.
Any help will be appreciated!
Here is my code:
var $container = $('#container');
// masonry init
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
columnWidth: 100
});
});
// ancybox fancybox
function init(){
$("a.inline").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'none',
'speedOut' : 0,
'hideOnOverlayClick': true,
'hideOnContentClick': false,
'overlayColor' : '#FFF',
'overlayOpacity' : 0.5,
'showCloseButton' : true,
'showNavArrows' : false
});
}
init();
$container.infinitescroll({
// infinitescroll init
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.item',
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// infinitescroll callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, {
isAnimated: false
}, function () {
// for new loaded part
init();
});
});
}
);