How to set caption on beforeShow - Fancybox 3

Question

I face the issue where i add button to caption i need to change button depend of action i manage to do it with

        caption : function( instance, item ) {
              var id = item.opts.$orig.attr("data-id");
              var caption = $(this).data('caption') || '';

              if ( item.type === 'image' ) {

                if (item.opts.$orig.prop("class") == 'selected') {
                  caption = (caption.length ? caption + '<br />' : '') + '<button class="btn btn-success remove-color" data-name="'+item.opts.$orig.attr("data-name")+'" data-id="'+item.opts.$orig.attr("data-id")+'"> Remove</button>' ;
                }else {
                  caption = (caption.length ? caption + '<br />' : '') + '<button class="btn btn-success add-color" data-name="'+item.opts.$orig.attr("data-name")+'" data-id="'+item.opts.$orig.attr("data-id")+'"> Add</button>' ;

                }
              }
              return caption;
          }




// later in the code
$(document).on('click', '.add-color', function(e){
...................
.............

   $('.color-thumb-wrapper').find('a[data-id="'+id+'"]').addClass('selected');

.............
.......

});

// this part working correct

but this is fire only one time when image is open and working correct if i close and open image again everything is correct i have button Remove there

The issue is comming when i click the button and slide next and prev image then i always getting button Add i tried with beforeShow but how to change caption from beforeshow ?

 // This code working correct
 beforeShow: function( instance, current ) {

   if (current.opts.$orig.prop("class") == 'selected') {
       console.log('correct');

      // how to change caption here ?
    }
  },

Answer 1

I done it with

this.opts.caption =

  beforeShow: function( instance, current ) {

   if (current.opts.$orig.prop("class") == 'selected') {
       this.opts.caption = '<button class="btn btn-success remove-color" data-name="'+this.opts.$orig.attr("data-name")+'" data-id="'+this.opts.$orig.attr("data-id")+'"> Премахни </button>' ;
    }
  },