CODEWITHSUNDEEP
htmlfancybox-3
Jordan Carter
Jordan Carter

Reputation: 1336

Fancybox 3 - Add buttons to custom HTML popup

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

Upvotes: 0

Views: 1815

Answers (1)

Janis
Janis

Reputation: 8769

Use correct JSON syntax, e.g., 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

Upvotes: 2

Related Questions