在按钮单击时更新 fancybox 当前幻灯片内容答案

【问题标题】：update fancybox current slide content on button click在按钮单击时更新 fancybox 当前幻灯片内容
【发布时间】：2017-11-14 11:42:15
【问题描述】：

我想根据内容类型更新当前幻灯片的内容。如果我尝试设置内容，而不是显示 pdf 或图像，它只显示 html 字符串。

这是我的代码：

    $("#fancywork-manual-b").click(function() {
  $.fancybox.open([{
        src: '<a id="btn_click" class="btn" href="#">clickme</a>',
        type: 'html',
        smallBtn: false,
        buttons: [
          'close',
          'fullScreen'
        ]

      }

    ],

    {
      afterShow: function(instance) {
        $("#btn_click").click(function() {
          $.fancybox.getInstance().setContent($.fancybox.getInstance().current, 'https://source.unsplash.com/ndjyaOp0fOc/1600x900');
        })
      }
    }


  );
});

CodePen

感谢任何帮助。谢谢

【问题讨论】：

那是因为你声明的类型是html。它应该是“iframe”
如何设置按钮点击的内容类型？因为setContent只接受两个params，一个是slide，另一个是content。

标签： javascript jquery fancybox fancybox-3

【解决方案1】：

你有两个选择：

1) 打开新实例并关闭当前实例：

afterShow: function(instance) {
    $("#btn_click").click(function() {

        $.fancybox.open({
            src : 'https://source.unsplash.com/ndjyaOp0fOc/1600x900',
            type : 'image'
        });

        instance.close();
    });

}

2) 如果你真的想重用当前实例，你需要更新group 和slide 对象。完全替换两者然后使用jumpTo方法激活会更容易：

afterShow: function(instance) {
    $("#btn_click").click(function() {

        var f = $.fancybox.getInstance();

        f.group  = [];
        f.slides = {};

        f.createGroup({
            src : 'https://source.unsplash.com/ndjyaOp0fOc/1600x900',
            type : 'image'
        });

        f.jumpTo( 0 )

    })
}

演示 - https://codepen.io/anon/pen/QOgPzy?editors=1010

【讨论】：