update fancybox current slide content on button click

Question

I want to update content of current slide on according to content type. If I try setting content, instead of showing pdf or image it only shows html string.

Here is my code:

    $("#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

Any help is appreciated. Thanks

Answer 1

You have 2 options:

1) Open new instance and close current one:

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

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

        instance.close();
    });

}

2) If you really want to reuse current instance, you would need to update group and slide objects. It would be easier to completely replace both and then use jumpTo method to activate:

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 )

    })
}

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