通过Ajax加载下一张图片并添加到Fancybox

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

问题ist 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 ...

来源

2013-03-19 Chrisn

当我关闭fancybox并重新打开它时，它运行良好。然后所有动态加载的图像出现在图库中... – Chrisn 2013-03-19 13:34:27

Fancybox不是用来处理图库项目的动态更新，一旦打开，** [检查此]（https://github.com/fancyapps/fancyBox/issues/257）**除非你自己定制（和哈希）解决方案出来。 – JFK 2013-03-19 17:28:19

OK后，只是为了好玩，并基于此GitHub问题imran-a的评论，这里是你砍死溶液：

$(".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()（其放置新图像在文档流量）我不得不推（手动地）的新图像的FANC内部ybox的小组。

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

另请注意，您必须在脚本开始时初始化var done = false;。

顺便说一句，忘记功能loadFancybox()，没有必要。

来源

2013-03-19 18:13:51 JFK

谢谢！但我不明白为什么这不是标准......是不是一个共同的要求？ – Chrisn 2013-03-22 15:39:40

@Chrisn：不是一个标准的实现，因为fancybox作为大多数插件，在DOM准备好之后被初始化，而那些项目还没有出现，所以你必须“推”它们。如果你在fancybox启动之前加载它们（通过ajax），那么它们将被加载到fancybox中，因为它使用'live'方法。 – JFK 2013-03-22 17:10:16

这是仅用于从ajax加载图像吗？我想你的代码，但它像它得到图像0,1,2然后0,1,2,3下一个0,1,2,3,4我的意思是在循环中它应该是0,1,2,3 ，4,5,6， – anam 2014-12-05 08:51:20

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

来源

2013-03-19 13:39:07

我添加了一些代码到我的操作系统:)图片被附加到图库容器后，我已经在所有项目上调用了.fancybox（）。但新图像只出现在我重新打开fancybox – Chrisn 2013-03-19 13:56:01

通过Ajax加载下一张图片并添加到Fancybox

回答

相关问题