通过Ajax加载下一个图像，并添加到的fancybox [英] Load next Images via Ajax and add to Fancybox

问题描述

我的问题是，我有一个大的画廊，这不应该是完全加载在第一页的负荷。 所以，我加载10 50图像和添加的fancybox给他们。 当用户点击一个按钮，第11届形象应该通过Ajax加载和附加到库容器。

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.

问题IST那的fancybox停止在第十图像，因为它不知道的动态负载的。

Problem ist that fancybox stops at the 10th image, because it doesn't know the dynamic load ones.

我如何添加动态加载的图像，以fancybox2？

How can I add dynamic loaded images to fancybox2?

目前我有这样的：

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（）获取下一个图像：）

ajaxGetNextImages() gets the next images :)

之后，我打电话loadFancybox（），这样所有新图像属于画廊。但是，它们没有包含，直到我重新开始的fancybox ...

after that I call loadFancybox() so that all new images belongs to the gallery. But they aren't included until I reopen fancybox...

推荐答案

确定，只是为了好玩，并根据 imran-在此 GitHub上发出的评论，这里就是你黑客攻击的解决方案：

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

注意，除了调用 ajaxGetNextImages（）（其中放置新图像文档流）我不得不推（手动）的在的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.

这不是一个完美的解决方案，但它的工作原理，请参阅 DEMO这里 ;你会看到三个缩略图在页面加载。一旦你打开的fancybox并导航到最后一个项目，三个缩略图将被添加到该文件，以及3个相应的图像到的fancybox的画廊。

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.

另请注意，您必须初始化 VAR做= FALSE; 在脚本的开头

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

顺便说一句，忘了功能 loadFancybox（），没有必要的。

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

这篇关于通过Ajax加载下一个图像，并添加到的fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！