无限滚动&加载新图像后的颜色框

时间:2013-01-06 08:01:49

标签: jquery colorbox infinite-scroll

当我的无限滚动加载新图像时,新图像上的颜色框调用不再起作用。如何在通过无限滚动调用加载新内容后使彩色框工作?

无限滚动(+砌体):

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

});

colorbox call:

 $(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>

1 个答案:

答案 0 :(得分:0)

通过将colorbox调用添加到无限滚动回调来解决它:

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