Обновить содержимое текущего слайда 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');
        })
      }
    }


  );
});

CodePen

Любая помощь приветствуется. Спасибо

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