当我的无限滚动加载新图像时,新图像上的颜色框调用不再起作用。如何在通过无限滚动调用加载新内容后使彩色框工作?
无限滚动(+砌体):
$(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>
答案 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});
});
}
);