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

jQuery - Image Enlarge in ASP.NET using jQuery

Article:
Viewed:  1504 
Posted On:  2/2/2015 2:40:02 AM 
How we can make an image enlarge on click of any image in asp.net 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="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery: Enlarge an Image</title>
    <link href="StyleSheet.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("img.imgthumb").click(function (e) {
                var enlargeImage = '<img src=Images/' + $(this).attr("alt") + '></img>';
                $('#divImgEnlarge')
                   .html($(enlargeImage)
                   .animate({ height: '300', width: '450' }, 1500));
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table cellpadding="1" cellspacing="1" width="880px" align="center" class="BlueBorder"
            style="background: White;">
            <tr>
                <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>
                </td>
            </tr>
 
            <tr>
                <td>
                    <asp:DataList ID="dListImages" runat="server" RepeatColumns="8">
                        <ItemTemplate>
                            <table border="1">
                                <tr>
                                    <td>
                                        <img alt='<%#Eval("Text") %>' src='<%#Eval("Value") %>' class="imgthumb" /></td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </asp:DataList>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: central; border: solid 2px red;">
                    <div id="divImgEnlarge"></div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>


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)
            {
                BindImages();
            }
        }
 
        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;
            dListImages.DataBind();
        }
    }
}

Now run your application:

1.png

Image 1.

Click on any image.

2.png

Image 2.

3.png

Image 3.

4.png

Image 4.

5.png

Image 5.

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