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#.

                               DEMO



                                         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"> 
        .imgt
            height: 100px
            width: 100px
        } 
    </style> 
    <script type="text/javascript">
        $(function () {
            $("img.imgt").click(function (e) {
                var enlarge = '<img src='<%#Eval("imgpath") %> + $(this).attr("alt") + '></img>';
                $('#ImgEnlarge')
                   .html($(enlarge)
                   .animate({ height: '360', width: '870' }, 1500));
            })
        })
    </script> 
</head> 
<body>
    <form id="form1" runat="server"> 
        <table cellpadding="1" cellspacing="2" width="880px" align="center" class="BlueBorder" 
            style="background: White;"> 
            <tr> 
                <td style="height: 50px;"> 
                </td> 
            </tr> 
 
            <tr> 
                <td> 
                    <asp:DataList ID="dListImages" runat="server" RepeatColumns="10"> 
                        <ItemTemplate> 
                            <table border="1"> 
                                <tr> 
                                    <td>
                                        <img alt='<%#Eval("imgpath") %>' src='<%#Eval("imgpath") %>' class="imgt" /></td> 
                                </tr> 
                            </table> 
                        </ItemTemplate> 
                    </asp:DataList> 
                </td> 
            </tr> 
            <tr> 
                <td style="text-align: center; vertical-align: central;"> 
                    <div id="ImgEnlarge"></div> 
                </td> 
            </tr> 
        </table> 
            </form> 
</body> 

</html>  

                          
                           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());
        con.Open();
        SqlCommand cmd = new SqlCommand("select imgpath from reg", con);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        adp.Fill(dt);
        dListImages.DataSource = dt;
        dListImages.DataBind();
    }


}


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 








2 comments:

  1. Thanks a lot author for bringing such useful information into our knowledge.
    Keep doing your good work, have a great week ahead.

    Property in lucknow , plot for sale in lucknow, property in lucknow for sell, property in lucknow for rent , post free property ads online ,

    ReplyDelete
  2. hi the image is not showing after i click the image to enlarge if the file name has spaces. for e.g if the filename is "myimage.jpg" it shows but if the filename is my "image.jpg" how can i overcome this pls.

    ReplyDelete