单击按钮时更新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