jquery - 加载新图像后无限滚动和颜色框

Question

当我的无限滚动加载新图像时，对新图像的颜色框调用不再起作用。通过无限滚动调用加载新内容后，如何使颜色框正常工作？

无限滚动（+砖石）：

$(function(){

var $container = $('#content_home');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.wrdLatest',
     columnWidth:15
  });
});

$container.infinitescroll({
  navSelector  : '#nav',    
  nextSelector : '#nav a', 
  itemSelector : '.wrdLatest'  
  },
  function( newElements ) {
    var $newElems = $( newElements ).css({ opacity: 0 });
    $newElems.imagesLoaded(function(){
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
    });
  }
);

});

彩盒调用：

 $(function() {
    $(".item_popup").colorbox({iframe:true, width:"916", height:"838"});
 });

html:

    <div class="wrdLatest" id="<?=$row['item_id']?>">
         <a class="item_popup" href="popup.php?id=<?=$row['item_id']?>">click</a>
    </div>

Answer 1

通过将颜色框调用添加到无限滚动回调来解决它：

  navSelector  : '#nav',    
  nextSelector : '#nav a', 
  itemSelector : '.wrdLatest'  
  },
  function( newElements ) {
    var $newElems = $( newElements ).css({ opacity: 0 });
    $newElems.imagesLoaded(function(){
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
        $(".item_popup").colorbox({iframe:true, width:"916", height:"838"});
        //$(".item_popup").colorbox({onComplete:function(){ $("#cboxWrapper").append("<div id='textbox12'>hello world</div>"); } }); 
        $("#item_popup").colorbox({iframe:true, width:"916", height:"838"});
        $(".signup_popup").colorbox({iframe:true, width:"488", height:"279", href:"welcome.php", scrolling: false});
        $(".activate_popup").colorbox({iframe:true, width:"488", height:"279", href:"active.php", scrolling: false});
        $("#activate_popup").colorbox({iframe:true, width:"488", height:"279", href:"active.php", scrolling: false});
        $(".signup_popup1").colorbox({iframe:true, width:"488", height:"279", href:"welcome.php", scrolling: false});
    });
  }
);