Wie zeige ich die Schaltfläche “Löschen” in der oberen rechten Ecke des Bildes an?

Lesezeit: 4 Minuten

Ich möchte die Schaltfläche zum Löschen in der oberen rechten Ecke des Bildes anzeigen? wie könnte ich das erreichen?

mein html ist so :-

Hauptbild :

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

x-Schaltflächenbild, das oben rechts im obigen Bild angezeigt wird

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

Bitte kein Hintergrundbild festlegen, ich brauche ein Klickereignis für diese Schaltfläche zum Löschen, etwa so:

Geben Sie hier die Bildbeschreibung ein

  • Machen Sie das große Bild zum Hintergrund eines Div mit relativem Layout und platzieren Sie dann die X-Schaltfläche in demselben Div mit der Position absolut oben: 0px; rechts: 0px;

    – PaperThick

    7. März 2013 um 13:17 Uhr

  • Ich kann nicht, diese Bilder werden dynamisch geladen, es ist ein Jquery-Karusselllistenelement

    – Nestor C

    7. März 2013 um 13:18 Uhr

  • Eigentlich Brief '×' wird gut tun. )

    – raina77ow

    7. März 2013 um 13:18 Uhr

  • Sie müssen das Bild in einen Container packen und dann das Bild und eine Schließen-Schaltfläche im Container haben. Etwas wie: <div class="container"> <img> <span>X</span> </div>. Sie sollten dem Bild eine relative Positionierung geben, um es unterhalb der Spanne stapeln zu können. Die Spanne sollte eine absolute Positionierung haben, und dann können Sie sie mit den Eigenschaften oben/links/unten/rechts beliebig positionieren.

    – qwerty

    7. März 2013 um 13:18 Uhr

Übliche Vorgehensweise mit position: relative und 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;
    ...
}

Erweiterte Demo (+ JS-Interaktion) http://jsfiddle.net/yHNEv/

Ich habe einen für dich codiert http://jsfiddle.net/PPN7Q/

Sie müssen das Bild in ein DIV einschließen

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

und wenden Sie die folgenden CSS-Regeln an

.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;
}

  • Hier können wir ein Klickereignis für das Hauptbild und Löschen abrufen.

    – Nestor C

    7. März 2013 um 13:48 Uhr

Benutzer-Avatar
Arun P. Johny

Versuchen Sie so etwas wie

<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>

Demo: Geige

<div style=" float: right;margin-left: 289px;position: absolute;">*</div>
<img src="https://stackoverflow.com/questions/15272191/score.png" width="300" height="300" />

Bitte versuchen Sie dies. Es könnte helfen.

Benutzer-Avatar
XiM

Meiner Meinung nach kann man einfach einstellen style="position:absolute;top:0px;right:0px;" zum RemoveButton.ico und style="position:relative;" zum div mit img

Benutzer-Avatar
Echilon

Sie könnten dies versuchen:

<div style="position:relative; width:'mainimagewidth'">
main image<img src="" />
<span style="position:absolute; top:0; right:0;">ximage<img src="" /></span>
</div>

Benutzer-Avatar
Ben Müller

Dafür solltest du ein Plugin schreiben

(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);

1036210cookie-checkWie zeige ich die Schaltfläche “Löschen” in der oberen rechten Ecke des Bildes an?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy