Question

我们正在使用Fancybox为我们的图片库提供灯箱。

我们有一个带有“图像”类的ul。每个列表项都包含一个锚标记和一个图像。锚标记包含完整大小图像的href。

此代码用于设置灯箱。

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () {
        if (!themeJSEnabled) {
            $(".images a").fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'titlePosition': 'inside',
                'autoScale': true,
                'centerOnScroll': true,
                'overlayOpacity': .95,
                'titleFromAlt': true,
                'scrolling': 'no'
            });
        }
    });
//]]>
</script>

这适用于我们的大多数私人标签，但是一种特殊的风格不起作用。

不起作用的样式使用javascript来撕掉部分DOM并重构它（如下所示）

 $("#subcontent2").before("<div class='combinedContentWrapper'></div>");
 $("div.combinedContentWrapper").append("<div class='combinedContent'></div>");
 $("div.combinedContent").append("<div class='sc1'></div>");
 $("div.combinedContent").append("<div class='mc'></div>");
 $("div.mc").append($(".maincontent").html());
 $("div.sc1").append($(".subcontent1").html());
 $("div.maincontent").remove();
 $("div.subcontent1").remove();
 $("div.mc").addClass("maincontent");
 $("div.sc1").addClass("subcontent1");

在这个样式的主题中，jSEnabled（来自第一个代码块）是真的，所以在使用上面的代码重构DOM之后，我使用以下代码来注册Fancybox：

 $(".images a").fancybox({
      'transitionIn': 'elastic',
      'transitionOut': 'elastic',
      'titlePosition': 'inside',
      'autoScale': true,
      'centerOnScroll': true,
      'overlayOpacity': .95,
      'titleFromAlt': true,
      'scrolling': 'no'
  });

据我了解，这应该有效，因为我在DOM重建之前没有注册任何东西，并且fancybox应该注册新的元素。

但是，当我第一次单击列表中的任何图像时，它会抛出一个javascript错误 - “t is undefined”。在完全不相关的方法中，此错误列在第17行。即使该方法被try / catch块包围，仍会发生错误。随后的图像点击不会出现错误，哪个产品没有结果。

如何让Fancybox在这种情况下工作？

您可以在this link的测试服务器上看到一个实例。单击“图像”，然后单击图像。

Answer 1

好的，我们最终找到了原因。

当我们修改DOM时，它似乎丢失了对fancybox javascript的引用。

通过将fancybox引用移动到头部来修复此问题，如下所示：

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterClientScriptInclude(this.Page, GetType(), "fancybox1", "scripts/FancyBox/jquery.fancybox-1.3.4.pack.js");
    ScriptManager.RegisterClientScriptInclude(this.Page, GetType(), "fancybox2", "scripts/FancyBox/jquery.mousewheel-3.0.4.pack.js");
    Page.Header.Controls.Add(new LiteralControl("<link rel=\"stylesheet\" type=\"text/css\" href=\"scripts/FancyBox/jquery.fancybox-1.3.4.css\" />"));
}

一旦我们这样做了，它就开始为我们工作了。

改变DOM后，jQuery FancyBox无法正常工作

1 个答案: