I'm working on a spfx webpart and using NoJS for it. The webpart is an imageslider with carousel.

I'm going to be using the plugin here

The plugin is FancyApps

The issue is how to bind the plugin using jquery in my code below

public render(): void {
    this.domElement.innerHTML = `
        <img src="https://lipsum.app/id/2/200x150" />

      <a data-fancybox="gallery" data-src="https://lipsum.app/id/3/1024x768">
        <img src="https://lipsum.app/id/3/200x150" />

      <a data-fancybox="gallery" data-src="https://lipsum.app/id/4/1024x768">
        <img src="https://lipsum.app/id/4/200x150" />

  public constructor() {
    //SPComponentLoader.loadCss('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
    let cssURL = "https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css";
    SPComponentLoader.loadScript("https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js");


As you can see below i'm using the SPComponentLoader to load the script. The last one SlideBind.js is where i'm calling the plugin like below

    $.Fancybox.bind("[data-fancybox]", {
  // Your custom options

But when test my webpart my running gulp serve the images load fine and everything but in the console i get this error enter image description here

How can I reference this as i can't see any other way in the instructions.

Thanks in advance


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.