Help with Custom Close Button

[BearsFan]

Hi, trying to add my own SVG for the close button, but this is not working. Can you possibly let me know what I am doing wrong here? Thanks!

Fancybox.show([{ 
    src: "#interstitial", 
    type: "inline",
    template: {
      closeButton: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="29" viewBox="0 0 12 29"><text id="X" transform="translate(1 22)" fill="#fff" font-size="19" font-family="MetaPro-Medi, Meta Pro"><tspan x="0" y="0">X</tspan></text></svg>'
    }   
  }]); 

[fancyapps]

Hi,

You see, Fancybox is like a big carousel, and the Fancybox.show() method expects two parameters - the first is an array that contains slide objects, and the second (optional) is an object that contains options associated with the entire carousel. Templates are not customizable per slide, therefore change your snippet to:

Fancybox.show([{ 
  src: "#interstitial", 
  type: "inline",
}], {
  template: {
    closeButton: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="29" viewBox="0 0 12 29"><text id="X" transform="translate(1 22)" fill="#fff" font-size="19" font-family="MetaPro-Medi, Meta Pro"><tspan x="0" y="0">X</tspan></text></svg>'
  }   
}); 

[BearsFan]

thank you! appreciate it.