Download Source
In this article you will learn how to call image and show with zoom effect.
Create Table
HTML Code
C# Code
Output Preview
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
2 comments:
This code is not working with master and content page.
Please help me how to use this code with master and content page in asp.net c#
It's very urgent.
Thank You
My problem has been resolved.
I was add Contentplaceholder2 just before zoom1.
Sample Code:
class='cloud-zoom-gallery'
rel="useZoom: 'ContentPlaceHolder2_zoom1', smallImage: '
Thank You
Patel Azharuddin.
Post a Comment