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 ?
}
},
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>' ;
}
},