Email: Password:       Forgot Password 
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.

jQuery - Image Enlarge in ASP.NET using jQuery

Viewed:  2924 
Posted On:  02/02/2015 02:40:02 
How we can make an image enlarge on click of any image in c# using jQuery? 

In this article I am going to show how we can show images in data list from a directory and on click of any image how we can enlarge that image using jQuery.

Below is my aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EnlargeImageOnClick.Default" %>
<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <title>jQuery: Enlarge an Image</title>
    <link href="StyleSheet.css" rel="stylesheet" />
    <script type="text/javascript" src=""></script>
    <style type="text/css">
        .imgthumb {
            height: 100px;
            width: 100px;
        .imgdiv {
            background-color: White;
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
            border: solid 1px #c6cfe1;
            height: 500px;
            width: 450px;
    <script type="text/javascript">
        $(function () {
            $("img.imgthumb").click(function (e) {
                var enlargeImage = '<img src=Images/' + $(this).attr("alt") + '></img>';
                   .animate({ height: '300', width: '450' }, 1500));
    <form id="form1" runat="server">
        <table cellpadding="1" cellspacing="1" width="880px" align="center" class="BlueBorder"
            style="background: White;">
                <td style="height: 50px; background-color: skyblue; padding-left: 10px;">
                    <span style="font-size: 20pt; font-weight: bold; color: blue;">jQuery: Image Enlarge On Image Click</span>
                    <asp:DataList ID="dListImages" runat="server" RepeatColumns="8">
                            <table border="1">
                                        <img alt='<%#Eval("Text") %>' src='<%#Eval("Value") %>' class="imgthumb" /></td>
                <td style="text-align: center; vertical-align: central; border: solid 2px red;">
                    <div id="divImgEnlarge"></div>

My aspx.cs code:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace EnlargeImageOnClick
    public partial class Default : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
            if (!IsPostBack)
        public void BindImages()
            string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/"));

            List<ListItem> files = new List<ListItem>();
            foreach (string filePath in filePaths)
                files.Add(new ListItem(Path.GetFileName(filePath), filePath));
            dListImages.DataSource = files;

Now run your application:


Image 1.

Click on any image.


Image 2.


Image 3.


Image 4.


Image 5.

         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us