Roots Discourse

Fancybox is not defined with Sage 10

First thank you for this amazing starter theme/project.

I’m trying to add Fancyapps UI (fancybox 4) to a a WordPress theme I’m developing with Sage 10.

  • I installed it with Yarn (I can see the folder in node_module).
  • I setup the import in my app.js like so:
import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui";

$(document).ready(() => {

  Fancybox.bind("[data-fancybox]", {
    // Your options go here
  });
  console.log(Fancybox);

});
  • In my console I get this message due to the console.log(Fancybox);
    class T extends r{constructor(t,i={}){L=function(){let t=!1;return document.createElement("div").focus({get preventScroll(){return t=!0,!1}}),t}(),super(function(t,i){const s=e(!0,{},t[i.startIndex]||{});r…
    But if I try to write Fancybox in the console I get:
VM767:1 Uncaught ReferenceError: Fancybox is not defined
    at <anonymous>:1:1

I’m clueless how to make it work and I want to do it right and avoid using CDN :neutral_face:

Thanks. Sorry for my newbiness. :slight_smile:

ok, so the jQuery ready part wasn’t necessary.
And I just needed to make it available global like so:
window.Fancybox = Fancybox;

1 Like