Want to Display Big image on thumbnail click in ASP.Net
<pre><code>    ASP Code is!
    &lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="newappexample._Default" %&gt;

    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
    &lt;head&gt;
        &lt;title&gt;Photo Gallery&lt;/title&gt;
            &lt;style type="text/css"&gt;
            .black_overlay{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: black;
                z-index:1001;
                -moz-opacity: 0.8;
            }
            .white_content {
                display: none;
                position: absolute;
                top: 25%;
                left: 25%;
                width: 50%;
                height: 50%;
                padding: 16px;
                border: 16px solid orange;
                background-color: white;
                z-index:1002;
                overflow: auto;
            }
                    div.center
            {
                margin-left: 20%;
                margin-right: 20%;
                width: 770px;
                background-color:#FFF;
            }
            div.middle
            {
                background-image:url('images/center.jpg');
                background-repeat: repeat-y;
                min-height:200px;
                margin-left: 100px;
                margin-right: 100px;
                margin-top:0px;
                padding-top:0px;
            }
        &lt;/style&gt;        
    &lt;/head&gt;
    &lt;body&gt;
        &lt;form id="form1" runat="server"&gt;
        &lt;div&gt;
    &lt;asp:Panel ID="panelIDtb" BorderColor="Red" BorderStyle="Solid" BackColor="GrayText" BorderWidth="1px" Width="1000px" ScrollBars="Auto" runat="server" Height="130px"&gt;
        &lt;asp:Repeater
            id="RepeaterImage"
            runat="server"&gt;
            &lt;ItemTemplate&gt;
                &lt;asp:ImageButton id="Image1" Width="100px" Height="100px" OnClientClick="" OnClick="ImageButOnClick"
                    ImageUrl='&lt;%# Container.DataItem %&gt;' Runat="server" /&gt;
            &lt;/ItemTemplate&gt;
        &lt;/asp:Repeater&gt;
        &lt;/asp:Panel&gt;
        &lt;div class="middle"&gt;
        &lt;asp:Panel ID="PanelBigImage" BorderStyle="Dotted" BackColor="AntiqueWhite" BorderWidth="2px" runat="server" Width="800px" Height="700px"&gt;

        &lt;/asp:Panel&gt;
        &lt;/div&gt;
        &lt;/div&gt;
             &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;


and My C Sharp code behind is!

using System;
using System.Collections;
using System.Drawing;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.IO;
using System.Collections.Generic;

namespace newappexample
{
    public partial class _Default : System.Web.UI.Page
    {
        void Page_Load()
        {
            if (!Page.IsPostBack)
            {
                RepeaterImage.DataSource = GetPhotos();
                RepeaterImage.DataBind();
            }
        }

        public List&lt;String&gt; GetPhotos()
        {
            List&lt;string&gt; photos = new List&lt;string&gt;();
            string photoPath = MapPath("~/myimages/images_tn");
            string[] files = Directory.GetFiles(photoPath);
            foreach (string photo in files)
                photos.Add("~/myimages/images_tn/" + Path.GetFileName(photo));
            return photos;
        }
        public void ImageButOnClick(object sender, EventArgs e)
        {
           // var newP = "Changing Some Paragraph";
           // PanelBigImage.Visible = "";
        }
    }
}
</code></pre>

<p>Thumbnail Images are displaying. As i click on thumbnail i want to preview big image related to that thumbnail. How can i do this?? This task is new for me and i am also a beginner. I googled a lot but i didnt reached to a decision and previously i didnt use any JQuery or javascript like. </p>
