Enlarge Image From Datalist With Database Using Jquery Asp.Net C#

Enlarge Image From Datalist  With Database Using Jquery 

Image Enlarge From DataList Using Jquery Plugin in Asp.Net C#.


                                         Download Coding

                           HTML Coding

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <title>Enlarge an Image from Datalist Using Jquery in Asp.Net C#</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <style type="text/css"> 
            height: 100px
            width: 100px
    <script type="text/javascript">
        $(function () {
            $("img.imgt").click(function (e) {
                var enlarge = '<img src='<%#Eval("imgpath") %> + $(this).attr("alt") + '></img>';
                   .animate({ height: '360', width: '870' }, 1500));
    <form id="form1" runat="server"> 
        <table cellpadding="1" cellspacing="2" width="880px" align="center" class="BlueBorder" 
            style="background: White;"> 
                <td style="height: 50px;"> 
                    <asp:DataList ID="dListImages" runat="server" RepeatColumns="10"> 
                            <table border="1"> 
                                        <img alt='<%#Eval("imgpath") %>' src='<%#Eval("imgpath") %>' class="imgt" /></td> 
                <td style="text-align: center; vertical-align: central;"> 
                    <div id="ImgEnlarge"></div> 


                           C# Coding

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());
        SqlCommand cmd = new SqlCommand("select imgpath from reg", con);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        dListImages.DataSource = dt;


First - Create New Form - Add Datalist - Bind Images Data Column

DataList Add - Table Repeatcolumn & Bind Database Field

Next - Show Table Firlds & Datalist Datacolumn


Next - Connect Database Connection - Bind Images To Datalist 


Post a Comment