Display enlarged image in popup on DataList Image Click using JavaScript in ASP.Net

Hi ashish007,

Refer below code.

HTML

<div style="width: 100%; padding-top: 10px;">
    <table width="350px" class="table">
        <tr>
            <td style="width: 10px; padding-top: 15px; padding-bottom: 15px;">
                <asp:Label ID="Label2" runat="server" Text="Photos" Font-Names="verdana" Font-Size="12pt" Font-Bold="true"></asp:Label></td>
            <td style="width: 20px;">
                <asp:LinkButton ID="LinkButton1" runat="server" Font-Names="Verdana" Font-Size="12pt" ForeColor="LightCoral" Text="See All Photos"></asp:LinkButton>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Label ID="Label3" runat="server" Visible="false"></asp:Label>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div>
                    <asp:DataList ID="DataList2" runat="server" RepeatColumns="3" CellSpacing="3">
                        <ItemStyle CssClass="grid1" />
                        <ItemTemplate>
                            <table>
                                <tr style="margin: 10px;" class="pimg">
                                    <td colspan="2">
                                        <asp:Label ID="lblid" runat="server" Visible="false" Text='<%#Eval("ID") %>'></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td rowspan="2" colspan="2">
                                        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("image_url")%>' Width="100px"
                                            Height="100px" Style="-webkit-cursor: pointer" OnClientClick="return LoadDiv(this.src);" />
                                        <br />
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </asp:DataList>
                </div>
            </td>
        </tr>
    </table>
</div>
<div id="divImage" class="info">
    <table style="height: 100%; width: 100%">
        <tr>
            <td valign="middle" align="center">
                <img id="imgLoader" alt="" src="../images/loader.gif" />
                <img id="imgFull" runat="server" alt="" src="" style="display: none; height: 300px; width: 400px" />
            </td>
        </tr>
        <tr>
            <td align="center" valign="bottom">
                <input id="btnClose" type="button" value="close" onclick="HideDiv()" />
            </td>
        </tr>
    </table>
</div>
<div id="divBackground" class="modal">
</div>
<style type="text/css">
    .modal {
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: black;
        z-index: 100;
        opacity: 0.8;
        filter: alpha(opacity=60);
        -moz-opacity: 0.8;
        min-height: 100%;
    }

    #divImage {
        display: none;
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        background-color: White;
        height: 350px;
        width: 410px;
        padding: 3px;
        border: solid 1px black;
    }
</style>
<script type="text/javascript">
    function LoadDiv(url) {
        var img = new Image();
        var bcgDiv = document.getElementById("divBackground");
        var imgDiv = document.getElementById("divImage");
        var imgFull = document.getElementById("imgFull");
        var imgLoader = document.getElementById("imgLoader");

        imgLoader.style.display = "block";
        img.onload = function () {
            setTimeout(function () {
                imgFull.src = img.src;
                imgFull.style.display = "block";
                imgLoader.style.display = "none";
            }, 1000); 
        };
        img.src = url;
        var width = document.body.clientWidth;
        if (document.body.clientHeight > document.body.scrollHeight) {
            bcgDiv.style.height = document.body.clientHeight + "px";
        }
        else {
            bcgDiv.style.height = document.body.scrollHeight + "px";
        }

        imgDiv.style.left = (width - 650) / 2 + "px";
        imgDiv.style.top = "20px";
        bcgDiv.style.width = "100%";

        bcgDiv.style.display = "block";
        imgDiv.style.display = "block";
        return false;
    }
    function HideDiv() {
        var bcgDiv = document.getElementById("divBackground");
        var imgDiv = document.getElementById("divImage");
        var imgFull = document.getElementById("imgFull");
        if (bcgDiv != null) {
            bcgDiv.style.display = "none";
            imgDiv.style.display = "none";
            imgFull.style.display = "none";
        }
    }
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        SHOWUSERUPLOADPHOTO();
    }
}

public void SHOWUSERUPLOADPHOTO()
{
    DataList2.Visible = true;
    System.Data.DataTable dt = new System.Data.DataTable();
    dt.Columns.AddRange(new System.Data.DataColumn[] { 
        new System.Data.DataColumn("ID"), 
        new System.Data.DataColumn("image_url") });
    dt.Rows.Add(1, "01.jpg");
    dt.Rows.Add(2, "02.jpg");
    dt.Rows.Add(3, "03.jpg");
    dt.Rows.Add(4, "04.jpg");
    DataList2.DataSource = dt;
    DataList2.DataBind();

    foreach (DataListItem item in DataList2.Items)
    {
        ImageButton imbtn = item.FindControl("ImageButton1") as ImageButton;
        imbtn.ImageUrl = "~/Userimage/" + imbtn.ImageUrl;
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        SHOWUSERUPLOADPHOTO()
    End If
End Sub

Public Sub SHOWUSERUPLOADPHOTO()
    DataList2.Visible = True
    Dim dt As Data.DataTable = New Data.DataTable()
    dt.Columns.AddRange(New Data.DataColumn() {
                        New Data.DataColumn("ID"),
                        New Data.DataColumn("image_url")})
    dt.Rows.Add(1, "01.jpg")
    dt.Rows.Add(2, "02.jpg")
    dt.Rows.Add(3, "03.jpg")
    dt.Rows.Add(4, "04.jpg")
    DataList2.DataSource = dt
    DataList2.DataBind()

    For Each item As DataListItem In DataList2.Items
        Dim imbtn As ImageButton = TryCast(item.FindControl("ImageButton1"), ImageButton)
        imbtn.ImageUrl = "~/Userimage/" & imbtn.ImageUrl
    Next
End Sub

Screenshot