Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

jquery - Load next Images via Ajax and add to Fancybox

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...