CODEWITHSUNDEEP
jqueryasp.net
MMakati
MMakati

Reputation: 703

Overlay image using jQuery append

I am creating an application that will add frame on the main image every time I click the frame.

this is my code:

ASPX:

<asp:Panel ID="stage" runat="server" cssClass="containment-wrapper" style="border:1px solid #000000;">
         <asp:ImageButton ID="imgBrowse" runat="server" Height="375px" Width="640px" src="Image/MainImage.png"/>
         <input type='file' id="inpUploader" style="display:none;"/>
</asp:Panel>


<img src="Image/Frames/sampleFrame1.png" class="Frames"/>
<img src="Image/Frames/sampleFrame2.png" class="Frames"/>
<img src="Image/Frames/sampleFrame3.png" class="Frames"/>

CS:

protected void Page_Load(object sender, EventArgs e)
    {
        imgBrowse.Attributes.Add("onclick", "document.getElementById('inpUploader').click(); return false;");
    }

JS:

$('.Frames').click(function () {
    var imageClone = $(this).clone();
    $("#stage").append(imageClone);

});

The code is appending to the stage but below the main image. This is the sample output of my code: enter image description here

And I want to create like this:

enter image description here

Upvotes: 0

Views: 148

Answers (1)

Satpal
Satpal

Reputation: 133403

You can create a CSS class, such as

.overlap { position: absolute; left: 0; top: 0; }

Apply it in cloned image

var imageClone = $(this).clone().addClass('overlap');
$("#stage").append(imageClone);

DEMO, In demo there are 2 image overlapped.

EDIT

$("#stage").click(function (event) {
    event.preventDefault();
    $('#inpUploader').trigger('click');
    //or
    $('#inpUploader')[0].click();
});

Upvotes: 1

Related Questions