Home/ Questions/Q 7037211
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:31:01+00:00

We are using Fancybox to provide a lightbox for our image gallery. We have

  • 0

We are using Fancybox to provide a lightbox for our image gallery.

We have a ul with class ‘images’. Each list item contains an anchor tag and an image inside of it. The anchor tag contains an href of the full sized image.

This code is used to set up the lightbox.

<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>

This works fine for most of our private labels, but one particular style doesn’t work.

The style that doesn’t work uses javascript to rip apart part of the DOM and reconstruct it (as follows)

 $("#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");

In themes of this style themeJSEnabled (from the first code block) is true, so AFTER the DOM is reconstructed with the above code, I use the following code to register the Fancybox:

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

As I understand it, this should work, as I didn’t register anything before the DOM was reconstructed, and the fancybox should be registering on the new elements.

However, when I first click any image in the list, it throws a javascript error – ‘t is undefined’. This error is listed as being on line 17, within a completely unrelated method. The error still occurs even if that method is surrounded by a try/catch block. The error does NOT occur on subsequent clicks on images, which product no result.

What can I do to get the Fancybox to work in this situation?

You can see an example live on our test server at this link. Click on ‘Images’, then click an image.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, we eventually found the cause.

    When we modify the DOM, it seems to lose the references to the fancybox javascript.

    This was fixed by moving the fancybox references to the head as follows:

    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\" />"));
}

    Once we did this, it started working for us.

    • 0