Add a class to Fancy.show

[stathimexas]

How can I add a class, in my case, class="notranslate" to Fancybox.show popup frame? I want google translate to ignore this line.

Here is where I want to add it: Fancybox.show([{type: "html", src: "<div ><p>some message</p></div>", caption: "some title"}]);

Thank you.

[fancyapps]

Hi,

You can add class name to your <div> element directly:

Fancybox.show(
  [
    {
      type: "html",
      src: '<div class="notranslate"><p>some message</p></div>',
      caption: "some title",
    },
  ]
);

You could also use mainClass option to add class name to the main container:

Fancybox.show(
  [
    {
      type: "html",
      src: "<div ><p>some message</p></div>",
      caption: "some title",
    },
  ],
  { mainClass: "notranslate" }
);

There is currently no option to set custom classname to the slide, but you can always use callbacks to archive desired result:

Fancybox.show(
  [
    {
      type: "html",
      src: "<div ><p>some message</p></div>",
      caption: "some title",
    },
  ],
  {
    on: {
      "Carousel.createSlide": function (fancybox, carousel, slide) {
        slide.$el.classList.add('notranslate');
      },
    },
  }
);

[stathimexas]

Oh wow, Janis, very nice. Thank you so much. I was going to send it to my sister in Greece, but thenlook at this most strange behavior I just noticed: the link to google translate is somehow "wiped off" after the popup is executed. I don't know how else to put it. Go here and click on any of the links. It will not take you there. It is as if the iframe resets something. I am sorry for not being able to rephrase it.

[fancyapps]

Sorry, I do not have explanation for that, maybe try disabling Hash plugin, try using Hash: false.