how to show delete button in top right corner of I

Question

i would like to show delete button at top right corner to image? how could i achieve this?

my html is like this :-

main image :

<img id="' + id + '" src="../Images/DefaultPhotoMale.png" class="' + item + '" width="40" height="40" alt="image" title="' + projectTitle + '" style="cursor:pointer" />

x button image to display in top-right of above image

• '<img id="' + item.Soid + '" src="../Images/RemoveButton.ico" style="display:none" title="Remove Specialization" />

No background image set please, i need click event for that delete button something like this :

Answer 1

You should write a plugin for this

(function ($, window, document, undefined) {

'use strict';

var defaults = {};

var Delete = function (element) {

    // You can access all lightgallery variables and functions like this.
    this.core = $(element).data('lightGallery');

    this.$el = $(element);
    this.core.s = $.extend({}, defaults, this.core.s)

    this.init();

    return this;
}

Delete.prototype.init = function () {
    var deleteIcon = '<span id="lg-clear" class="lg-icon deletePicture"><span class="glyphicon glyphicon-trash"></span></span>';
    this.core.$outer.find('.lg-toolbar').append(deleteIcon);

    this.delete();

};


Delete.prototype.delete = function () {
    var that = this;
    var image_id = '';
    this.core.$outer.find('.deletePicture').on('click', function () {
    // get vars from data-* attribute
        image_id = that.core.$items.eq(that.core.index).data('id');
        table_name = that.core.$items.eq(that.core.index).data('table-name');

        /**
         * Remove Touchpoint Retailer Image
         */
        var formData = new FormData();
        formData.append('image_id', image_id);
        $.ajax(......).success(function()
        {
            var thumbcount = that.core.$outer.find('.lg-thumb-item').length;
            if(thumbcount >= 1) {
                // remove slides
            }
            else {
                that.core.destroy();
            }
        });

    });
}


/**
 * Destroy function must be defined.
 * lightgallery will automatically call your module destroy function
 * before destroying the gallery
 */
Delete.prototype.destroy = function () {

}

// Attach your module with lightgallery
$.fn.lightGallery.modules.delete = Delete;


})(jQuery, window, document);