Как кастомизировать fancybox 5.0?

Question

[Raymont]

добрый день, как кастомизировать fancybox?
необходимо изменить сами стрелки, и поставить информацию о слайде под картинку.
я нашел методы afterLoad и хотел вручную менять контент svg после загрузки, но он не работает.
также tpl для html шаблонов, но смог его использовать только в toolbar.
Возможно я как-то не так использую tpl или метод afterLoad или его вообще нету в версии 5?

Fancybox.bind('[data-fancybox="gallery"]', {
  idle: false,

  Thumbs: {
    type: false,
  },

  Toolbar: {
    items: {
      btnCloseCustom: {
        tpl: `<button data-fancybox-close class="gallery__close-btn  f-button is-close-btn" title="{{CLOSE}}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"/></svg></button>`,
      },
    },
    display: {
      left: ["infobar"],
      right: ["btnCloseCustom"],
    },
  },
});

Необходимо изменить svg для стрелок и поставить под картинку индекс картинки.



Спасибо за ответ!

Answer 1

[aex-svs]

Приветствую) Сам столкнулся с подобной проблемой и решил её следующим образом.

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Navigation: {
      prevTpl:
        '<button tabindex="0" title="Назад" class="f-button is-prev" data-carousel-prev="true">' +
        ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"></path></svg></button>' +
        "</button>",
      nextTpl:
        '<button tabindex="0" title="Далее" class="f-button is-next" data-carousel-next="true">' +
        ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"></path></svg></button>' +
        "</button>",
    },
  },

  tpl: {
    closeButton:
      '<button data-fancybox-close class="f-button is-close-btn" title="Закрыть">' +
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"></path></svg>' +
      "</button>",
  },
});