Перевести Fancybox-Button


Я пытаюсь изменить всплывающую подсказку на кнопке закрытия fancyboy3, но ничего не помогает. Я старался
tpl: { closeBtn: '<a title="Test" class="fancybox-item fancybox-close" href="javascript:;"></a>'} так же как

lang : 'de',
i18n : {

    'de' : {
        CLOSE       : 'Test',

    }
}


но обе версии не помогли. Что я делаю неправильно?

$('#btn-slider-edit').fancybox({
        fullScreen: false,
        closeBtn: true,
        iframe: {
            css: {
                width: '80%',
                height: '80%'
            }
        },
        tpl: {
            closeBtn: '<a title="Test" class="fancybox-item fancybox-close" href="javascript:;"></a>'
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

3 ответа

Решение

Если вы используете fancyBox v3.1, то

1) Ваш первый фрагмент работает как положено:

$( '[data-fancybox]' ).fancybox({
  lang : 'de',
  i18n : {
    'de' : {
      CLOSE : 'Test',
    }
  }
});

https://codepen.io/anon/pen/bReeow

1) Вот как вы можете изменить шаблон кнопки:

$( '[data-fancybox]' ).fancybox({
    btnTpl : {
    close  : '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}} - TEST"></button>'
  }
});

https://codepen.io/anon/pen/BZzzdK

Fancybox 4 Локализация строк на ваш язык: https://fancyapps.com/docs/ui/fancybox/options#l10n

Извлечено из источников:

      <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<script>
Fancybox.defaults.l10n = {
    CLOSE: "Close",
    NEXT: "Next",
    PREV: "Previous",
    MODAL: "You can close this modal content with the ESC key",
    ERROR: "Something Went Wrong, Please Try Again Later",
    IMAGE_ERROR: "Image Not Found",
    ELEMENT_NOT_FOUND: "HTML Element Not Found",
    AJAX_NOT_FOUND: "Error Loading AJAX : Not Found",
    AJAX_FORBIDDEN: "Error Loading AJAX : Forbidden",
    IFRAME_ERROR: "Error Loading Page",
    TOGGLE_ZOOM: "Toggle zoom level",
    TOGGLE_THUMBS: "Toggle thumbnails",
    TOGGLE_SLIDESHOW: "Toggle slideshow",
    TOGGLE_FULLSCREEN: "Toggle full-screen mode",
    DOWNLOAD: "Download"
}
</script>

Например русская локализация будет:

      Fancybox.defaults.l10n = {
    CLOSE: "Закрыть",
    NEXT: "Следующий",
    PREV: "Предыдущий",
    MODAL: "Вы можете закрыть окно нажатием ESC",
    ERROR: "Ошибка, попробуйте повторить попытку",
    IMAGE_ERROR: "Изображение не найдено",
    ELEMENT_NOT_FOUND: "HTML элемент не найден",
    AJAX_NOT_FOUND: "Ошибка загрузки AJAX: Не найдено",
    AJAX_FORBIDDEN: "Ошибка загрузки AJAX: Запрещено",
    IFRAME_ERROR: "Ошибка при загрузке фрейма",
    TOGGLE_ZOOM: "Приблизить",
    TOGGLE_THUMBS: "Миниатюры",
    TOGGLE_SLIDESHOW: "Слайдшоу",
    TOGGLE_FULLSCREEN: "Полноэкранный режим",
    DOWNLOAD: "Загрузить"
}
// Fancybox3 translate
$.fancybox.defaults.i18n.ru = {
    CLOSE: "Закрыть",
    NEXT: "Вперед",
    PREV: "Назад",
    ERROR: "Запрашиваемый контент не может быть загружен. Пожалуйста, попробуйте позже.",
    PLAY_START: "Начать слайдшоу",
    PLAY_STOP: "Пауза",
    FULL_SCREEN: "На весь экран",
    THUMBS: "Миниатюры",
    DOWNLOAD: "Скачать",
    SHARE: "Поделиться",
    ZOOM: "Увеличить"
};
$.fancybox.defaults.lang = 'ru';
Другие вопросы по тегам