custom arrows in fancyapp v4?

[steverethink]

whats the attribute in the template options to use your own svg's? i know closeButton is in the doc, but i don't see anything for the prev and next arrows. i would assume its something like:

Fancybox.bind("[data-fancybox]", {
  template: {
    prevArrow: '<svg>...</svg>';
    nextArrow: '<svg>...</svg>;
  }
});

[fancyapps]

Hi,

Excellent question! You see, the latest generation Fancybox is very unique, it is a combination of 3 components - Fancybox, Carousel and Panzoom. Each has its own plugins. This architecture has many advantages and, once you get used to it, it is very easy to use. So the navigation arrows are actually created by the carousel plugin, and it can be customized as follows:

Fancybox.bind('[data-fancybox="gallery"]', {
  Carousel: {
    Navigation: {
      prevTpl: "<<",
      nextTpl: ">>",
    },
  },
});

Demo - https://fancyapps.com/playground/xh

[steverethink]

ahh worked perfectly! thanks!