My Problem is that I have a large gallery, that should not be load completely on first page load. So I load 10 of 50 images and add fancybox to them. When user clicks the next button, the 11th image should be loaded via Ajax and append to gallery container.
Problem ist that fancybox stops at the 10th image, because it doesn't know the dynamic load ones.
How can I add dynamic loaded images to fancybox2?
currently I have this:
function loadFancybox() {
$('a.lightbox').fancybox({
helpers: {
overlay: {
css: {
'background': 'rgba(0,0,0,0.8)'
}
}
},
beforeLoad: function() {
this.title = $(this.element).data('title');
ajaxGetNextImages();
loadFancybox();
},
loop: false
});
}
loadFancybox();
ajaxGetNextImages()
gets the next images :)
after that I call loadFancybox() so that all new images belongs to the gallery. But they aren't included until I reopen fancybox...
See Question&Answers more detail:os