Asphelp: Dynamic Image With Zoom Effect

Download Source

In this article you will learn how to call image and show with zoom effect.

Create Table

HTML Code

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <script type="text/javascript" src="images/jquery.min.js"></script>
    <link href="images/cloud-zoom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="images/cloud-zoom.1.0.2.js"></script>
    <link href="images/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div align="center" style="font-size: x-large">Dynamic Image From Database With Zoom Effect</div>
    <br />
    <br />
    <div class="zoom-small-image" style="">
        <a runat="server" class='cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">
            <img id="imgmain" runat="server" style="height: 320px; border: groove; width: 240px; overflow: hidden" /></a>
    </div>
    <div class="zoom-desc">
        <p>
            <a href="images/<%=href1 %>" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/<%=path1%>' ">
                <img id="img1" runat="server" class="zoom-tiny-image" alt="Thumbnail 1" width="48" height="64" style="border: groove;" /></a>

            <a href="images/<%=href2 %>" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/<%=path2%>' ">
                <img id="img2" runat="server" alt="Thumbnail 2" border="0" class="zoom-tiny-image" width="48" height="64" style="border: groove;" /></a>

            <a href="images/<%=href3 %>" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/<%=path3%>' ">
                <img id="img3" runat="server" alt="Thumbnail 3" border="0" class="zoom-tiny-image" width="48" height="64" style="border: groove;" /></a>
        </p>
    </div>
</body>
</html>

C# Code

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

namespace Dynamic_Image
{
    public partial class Home_page : System.Web.UI.Page
    {
        public string path1;
        public string path2;
        public string path3;
        public string href1;
        public string href2;
        public string href3;
        SqlConnection con = new SqlConnection("Data Source=Servername;Initial Catalog=Databasename;Integrated Security=True");

        protected void Page_Load(object sender, EventArgs e)
        {
            bindimage();               
        }

        public void bindimage()
        {
            con.Open();
            SqlCommand cmd = new SqlCommand("select * from imgdetails", con);
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                path1 = dr[1].ToString();       //For Pass Value In Anchortag
                path2 = dr[2].ToString();
                path3 = dr[3].ToString();

                zoom1.HRef = "images/" + dr[1].ToString();          //Call Tiny Image
                imgmain.Src = "images/" + dr[1].ToString();

                href1 = dr[1].ToString();
                img1.Src = "images/" + dr[1].ToString();            //Call Tiny Image

                href2 = dr[2].ToString();
                img2.Src = "images/" + dr[2].ToString();            //Call Tiny Image

                href3 = dr[3].ToString();
                img3.Src = "images/" + dr[3].ToString();   
            }
            dr.Dispose();
        }
    }
}

Output Preview

Download Source