Localization

Use l10n option to provide translations. This example shows how to quickly change the tooltip text for the next and previous arrows:

Fancybox.bind("[data-fancybox]", {
  l10n: {
    NEXT: "To next gallery item",
    PREV: "To previous gallery item",
  },
});

Some languages ​​already have full translations available. Their usage varies depending on whether you are using Fancybox as a module or using the UMD build.

ESM module

First, load translations from the corresponding JS file. For example, German (de):

import { de_DE } from "@fancyapps/ui/dist/fancybox/l10n/de_DE.js";

Specify translations using the l10n option.

Fancybox.bind("[data-fancybox]", {
  l10n: de_DE,
});

UMD build

First, load the corresponding JS file. For example, German (de):

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/l10n/de_DE.umd.js"></script>

The translations will then be loaded into the Fancybox.l10n.de object:

Fancybox.bind("[data-fancybox]", {
  l10n: Fancybox.l10n.de_DE,
});