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');
        })
      }
    }


  );
});

CodePen

感谢任何帮助。感谢

Answer 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

按钮点击更新fancybox当前幻灯片内容

1 个答案: