28

我想在右上角显示删除按钮以显示图像？我怎么能做到这一点？

我的html是这样的：-

主图：

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

x 按钮图像显示在上图的右上角

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

请不要设置背景图像，我需要该删除按钮的单击事件，如下所示：

在此处输入图像描述

4

7 回答 7

49

position: relative使用和的常用方法position: absolute。

HTML：

<div class="img-wrap">
    <span class="close">&times;</span>
    <img src="http://lorempixel.com/100/80">
</div>

CSS：

.img-wrap {
    position: relative;
    ...
}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
    ...
}

扩展演示（+JS交互）http://jsfiddle.net/yHNEv/

于 2013-03-07T13:37:17.467 回答
2

尝试类似的东西

<div style="position: relative">
    <img src="http://www.google.co.in/images/srpr/logo4w.png" />
    <img src="http://wecision.com/enterprise/images/icons/closeIcon.png" style="position: absolute; top: 4px; right: 5px"/>
</div>

演示：小提琴

于 2013-03-07T13:22:26.773 回答
2

我已经为你编写了一个http://jsfiddle.net/PPN7Q/

您需要将图像包装在 DIV 中

<div class="thumbnail">
<img src="http://96pix.com/images/renee-v.jpg" />
 <a href="">Delete</a>
</div>

并应用以下 CSS 规则

.thumbnail {
width:50px;
height:50px;
position:relative;
}

.thumbnail img {
max-width:100%;
max-height:100%;
}

.thumbnail a {
display:block;
width:10px;
height:10px;
position:absolute;
top:3px;
right:3px;
background:#c00;
overflow:hidden;
text-indent:-9999px;
}
于 2013-03-07T13:28:08.350 回答
0 
<div style=" float: right;margin-left: 289px;position: absolute;">*</div>
<img src="score.png" width="300" height="300" />

Please try this. It might help.

于 2013-03-07T13:21:57.140 回答
0

在我看来，你可以设置style="position:absolute;top:0px;right:0px;"forRemoveButton.ico和style="position:relative;"for divwithimg

于 2013-03-07T13:18:55.277 回答
0

你可以试试这个：

<div style="position:relative; width:'mainimagewidth'">
main image<img src="" />
<span style="position:absolute; top:0; right:0;">ximage<img src="" /></span>
</div>
于 2013-03-07T13:30:29.677 回答
0

你应该为此写一个插件

(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);
于 2017-04-04T21:46:56.173 回答