Load next Images via Ajax and add to Fancybox

Question

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...

Answer 1

OK, just for fun and based on imran-a's comment at this GitHub issue, here is your hacked solution :

$(".fancybox").fancybox({
    loop: false,
    beforeLoad: function () {
        if ((this.index == this.group.length - 1) && !done) {
            ajaxGetNextImages();
            done = true;
            this.group.push(
               { href: "images/04.jpg", type: "image", title: "Picture 04", isDom: false },
               { href: "images/05.jpg", type: "image", title: "Picture 05", isDom: false },
               { href: "images/06.jpg", type: "image", title: "Picture 06", isDom: false }
            ); // push 
        } // if
    } // beforeLoad
}); // fancybox

NOTICE that apart from calling ajaxGetNextImages() (which places the new images in the document flow) I had to push (manually) the new images inside the fancybox's group.

Is not a perfect solution but it works, see DEMO HERE; you will see three thumbnails at page load. Once you open fancybox and navigate to the last item, three more thumbnails will be added to the document as well as the 3 corresponding images to the fancybox gallery.

Also notice that you have to initialize var done = false; at the begining of your script.

BTW, forget about the function loadFancybox(),no needed.

Answer 2

try calling .fancybox(); again after loading images dynamically