Add class to fancybox__content element?

[LewBlu]

Hi,

I've tried adding a class to the element that is created with "fancybox__content" class on it but unable to get it to work. Below is the code that I tried to use:
Fancybox.show([{ src: '/example', type: "ajax", dragToClose: false, keyboard: false, mainClass: "exampleClass" }]);

I need to be able to add this class so that I can manage the width of the fancybox content depending on the content that I would like to show. I thought that the option to do this was "mainClass" but this doesn't seem to do anything?

Any help much appreciated.

[mDesignHub]

i would love to know this too

[fancyapps]

Hi, You can, for example, simply use callbacks to access slide element, and then you can do whatever you need. Janis

…

On Fri, 18 Nov 2022 at 09:16, mDesignHub ***@***.***> wrote: i would love to know this too — Reply to this email directly, view it on GitHub <#349 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIBWZKQMKDIIAN7AHOOAETWI5CPTANCNFSM6AAAAAAQHAOWRI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[mDesignHub]

thx janis. could you give us an example code syntax for better understanding.

[fancyapps]

Example:

Fancybox.show(
  [
    {
      src: "/example",
      type: "ajax",
      dragToClose: false,
      keyboard: false,
    },
  ],
  {
    on: {
      load: (_fancybox, slide) => {
        slide.$el.classList.add("exampleClass");
      },
    },
  }
);

[mDesignHub]

Thx janis, this helped alot,
could you tell me the correct syntax for adding a class only to div.fancybox__content ?

[fancyapps]

Simply check out slide variable, it contains useful info, for example, $content is a reference to the wrapping element.

[pork-chop]

I am trying to use the same demo to create a custom pop up that fills with dynamic data. I've tried quite a bit, but I cannot target slide as a variable - it just keeps returning undefined.

I can populate $leftCol and $rightCol exactly as I want, and I've got my CSS all set up so they're styled correctly. But I can't figure out how to move these elements in the DOM into the stage of div.fancybox__content.

Update -- I figured this out with a help of a colleague. I was trying to access 'slide' in a lifecycle stage that didn't quite exist in yet. I needed to work in the "done" stage.