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

Question

我想根据内容类型更新当前幻灯片的内容。如果我尝试设置内容，而不是显示 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');
        })
      }
    }


  );
});

代码笔

任何帮助表示赞赏。谢谢

Answer 1

您有 2 个选项：

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