ajax - $newElems.imagesLoaded は関数ではありません Masonry でライトボックスを使用する場合

Question

pinterestのような音楽共有サイトを作っています。

Masonry を使用してグリッド レイアウトを作成し、Infinite-Scroll で次のページを読み込みます。音楽アルバムをクリックすると、(fancybox を使用して) ライトボックスがポップされ、ajax でいくつかの情報が読み込まれます。

最初のページでは、すべてがうまくいきます。しかし、1 つの音楽アルバムをクリックして閉じ、ページを下にスクロールすると、新しく読み込まれた部分に次の問題があります。$newElems.imagesLoaded is not a function

これを修正する方法がわかりません。

どんな助けでも大歓迎です！

これが私のコードです：

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();
         });

    });
  }
);