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 

Read More

Image Zoom or Enlarge on Mouseover Using JQuery in Asp.Net

Image Zoom on Mouseover

Image Display Small Size  MouseOver The Image Show Zooming the Particular Image Using JQuery Plugin in Asp.Net.

                               Download Coding

                                                   Download
                                                 JQueryPlugin

                                      DEMO

                                     

HTML CODING

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1">

<title>  </title>

<script type="text/javascript" src="JQuery/jquery-1.4.1.js"></script>

<script type="text/javascript" src="JQuery/Drizzles.js"></script>

<script type="text/javascript">

    jQuery(document).ready(function ($) {

        $('#image3').addimagezoom()

        $('#image2').addimagezoom({

            zoomrange: [7, 7],

            magnifiersize: [550, 550],

            magnifierpos: 'right',

            cursorshade: true,

            cursorshadecolor: 'Green',

            cursorshadeopacity: 0.3,

            cursorshadeborder: '1px solid red',

            largeimage: '2.png'

        })

        $('#image1').addimagezoom({

            zoomrange: [3, 10],

            magnifiersize: [300, 300],

            magnifierpos: 'right',

            cursorshade: true,

            largeimage: '1.png'

        })

      

    })

</script>

<style type="text/css">

        .magnifyarea

        {

            box-shadow: 5px 5px 7px #818181;

            -webkit-box-shadow: 5px 5px 7px #818181;

            -moz-box-shadow: 5px 5px 7px #818181;

            filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);

            background: white;

        }

</style>

    </head>

<body>

    <form id="form1" runat="server">

   <div align="center">

       <table>

           <tr><td>

               <asp:Image ID="image1" runat="server" ImageUrl="~/1.png" Width="100px"></asp:Image>

       

             </td><td>

               <asp:Image ID="image2" runat="server" ImageUrl="~/2.png" Width="100px" />

               </td></tr>

           <tr><td colspan="2">

                   

           <asp:Image ID="image3" runat="server" ImageUrl="~/3.png" Width="100px" />

                                            

                        </td></tr>

       </table>     

   </div>                       

    </form> 

  

    </body>

</html>

First - Create New Web Form -  Add Image Control From ToolBox  - Image Property[F4] - ImageUrl - Assign Image for All Image Control

Next - Add JQuery Condition For  All Image Control - Position,ZoomSize etc..

Read More