通过 Ajax 加载下一个图像并添加到 Fancybox答案

【问题标题】：Load next Images via Ajax and add to Fancybox通过 Ajax 加载下一个图像并添加到 Fancybox
【发布时间】：2013-03-19 13:27:51
【问题描述】：

我的问题是我有一个大型画廊，不应该在第一页加载时完全加载。所以我加载了 50 张图片中的 10 张，并为它们添加了 fancybox。当用户点击下一个按钮时，第 11 张图片应该通过 Ajax 加载并附加到画廊容器中。

问题在于，fancybox 停在第 10 个图像，因为它不知道动态加载的图像。

如何将动态加载的图片添加到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() 获取下一张图片 :)

之后我调用 loadFancybox() 以便所有新图像都属于图库。但直到我重新打开 fancybox 后它们才会被包含在内......

【问题讨论】：

当我关闭fancybox并重新打开它时效果很好。然后所有动态加载的图像都出现在图库中......
Fancybox 的设计目的不是为了处理画廊项目打开后的动态更新，CHECK THIS 除非您提出自己的定制（和 hacky）解决方案。跨度>

标签： jquery ajax fancybox fancybox-2

【解决方案1】：

好的，只是为了好玩，基于imran-a 在这个GitHub 问题上的评论，这是你的黑客解决方案：

$(".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 的组中。

不是一个完美的解决方案，但它有效，请参阅 DEMO HERE；您将在页面加载时看到三个缩略图。打开 fancybox 并导航到最后一项后，文档中将添加另外三个缩略图，以及 fancybox 库中的 3 个对应图像。

还要注意，您必须在脚本开头初始化 var done = false;。

顺便说一句，忘记函数loadFancybox()，不需要。

【讨论】：

谢谢！但我不明白为什么这不是标准......这不是一个常见的要求吗？
@Chrisn ：不是标准实现，因为像大多数插件一样，fancybox 是在 DOM 准备好之后初始化的，而这些项目还没有，所以你必须“推送”它们。如果您在 fancybox 启动之前加载它们（通过 ajax），那么它们将被加载到 fancybox 中，因为它使用了live 方法。
这仅适用于从 ajax 加载图像一次吗？我正在尝试你的代码，但它就像它得到图像 0,1,2 然后 0,,1,2,3 下一个 0,1,2,3,4 我的意思是在循环中它应该是 0,1,2,3 ,4,5,6,
@simmisimmi 不确定您的意思。在您到达最初加载的最后一个图像后，该演示会调用所有其余的图像。然后循环遍历所有这些
谢谢你，这真的让我走上了我需要的解决方案的正确轨道。对于在单击第一张图像时尝试加载其他图像的每个人，请检查是否 ((this.group.length === 1)) - 这将确保您只添加一次其他图像。

【解决方案2】：

动态加载图片后尝试再次调用.fancybox();

【讨论】：

我在我的操作中添加了一些代码:) 在图像附加到画廊容器后，我已经在所有项目上调用了 .fancybox()。但是只有当我重新打开fancybox时才会出现新图像