【问题标题】:Fancybox 3 - Add buttons to custom HTML popupFancybox 3 - 将按钮添加到自定义 HTML 弹出窗口
【发布时间】:2018-07-31 14:37:55
【问题描述】:

我正在使用fancybox 3,类似这样的

<a href="#popup" data-fancybox="popup" data-buttons="['slideShow','fullScreen','thumbs','share']">Click me!</a>

<div id="popup">MY POPUP with custom HTML</div>

但是,没有添加任何按钮,并且我收到一个 jQuery 错误“无法使用 'in' 运算符在 ['slideShow','fullScreen','thumbs','share'] 中搜索 'length'”。我尝试通过数据选项传递选项对象,但效果不佳。我正在尝试做的正确语法是什么?我想添加一些标准按钮,例如缩略图预览、共享按钮(如果可以使用自定义 HTML)等

【问题讨论】:

    标签: html fancybox-3


    【解决方案1】:

    使用正确的 JSON 语法,例如,替换 ` 和 ":

    <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>
    

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

    【讨论】:

    • 实际上,我似乎无法让它工作。它在您的演示中有效,因为您链接到图像,但是当我链接到同一页面上的自定义 HTML 时它不起作用。
    • 那么也许试试这个 - codepen.io/anon/pen/WMLXzb?editors=1000(这似乎不适用于当前版本;你必须等待 v3.3 或者你可以从 codepen 中获取源代码)
    • 不错!知道那个版本什么时候出吗?我宁愿等到正式发布。
    猜你喜欢
    • 2018-10-14
    • 2023-03-10
    • 2021-10-06
    • 1970-01-01
    • 1970-01-01
    • 2014-01-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多