如何在AJAX更新DOM后重新初始化（召回）FancyBox？

问题描述：

我正在使用widgetkit插件（Joomla CMS），用于lightbox。由于widgetkit使用fancybox来显示lightbox im在这里发布一个问题。如何在AJAX更新DOM后重新初始化（召回）FancyBox？

当我没有使用AJAX技术来更新Joomla网站的内容时，FancyBox很棒。当我启用AJAX，并使用Ajax技术刷新或移动到另一个页面时，效果消失 - 图像本身会在新窗口中打开。我认为这是因为AJAX更新DOM并且FancyBox不能识别这个。我在AJAX代码的插件中有一个区域，我可以在其中编写某些JavaScript代码，AJAX将在AJAX完全加载网站后执行这些代码。我只是想知道我应该在那里输入什么，将FancyBox初始化为新的DOM，即AJAX刚生成的。

对于mootools灯箱（如果我有它），我可以简单地写下这一行：window.fireEvent（'domready'）;

我不知道如何做到这一点的jQuery FancyBox。

我也贴了同样的问题在这里（如果有人需要了解更多信息）：http://skrij.me/Qv56

答

你要么调用的fancybox（例如，$(".fancybox").fancybox();）每次进行更改DOM或使用第2版的使用时间“直播”附加点击处理器

那么对于图像的选择我的URL中使用是成功回调此功能：所以我试图把FLAX.Html。 onall（'load'，function（o）{（“a [data-lightbox]”）。fancybox（）; }）;它仍然不起作用。 – sumone

答

您需要创建初始化fancybox的函数，例如

function fancybox_init(){ 
     $("a[href*='.jpg'], a[href*='.png']").attr('rel', 'fancybox').fancybox({ 
      maxWidth : 800, 
      maxHeight : 600, 
      fitToView : true, 
      width  : '70%', 
      height : '70%', 
      autoSize : true, 
      closeClick : false, 
      openEffect : 'none', 
      closeEffect : 'none' 
     }); 
    }

再经过AJAX重载页面或添加新的块只需调用中的AJAX方法

如何在AJAX更新DOM后重新初始化（召回）FancyBox？

相关推荐