Fancybox 3-将按钮添加到自定义HTML弹出窗口

Question

I'm using fancybox 3, something like this

 <a href="#popup" data-fancybox="popup" data-buttons="['slideShow','fullScreen','thumbs','share']">Click me!</a> <div id="popup">MY POPUP with custom HTML</div> 

However, no buttons get added, and I get a jQuery error "Cannot use 'in' operator to search for 'length' in ['slideShow','fullScreen','thumbs','share']". I've tried passing an object of options through data-options, but that did not work well. What is the correct syntax for what I am trying to do? I want to add some of the standard buttons, like the thumbnails preview, share button (if that's possible with custom HTML), etc

Answer 1

Use correct JSON syntax, eg, replace ` and ":

<a href="https://source.unsplash.com/xAgvgQpYsf4/1500x1000" data-fancybox="group" data-buttons='["slideShow","fullScreen","thumbs","share"]'>
  <img src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />
</a>

Demo - https://codepen.io/anon/pen/oEaoVr?editors=1000