Exploring Asp.net, Silverlight,c#,SQL Server,PHP: Zoom in zoom out images in asp.net

Introduction:

In this article I will explain how to implement fancy zoom effect for image when we click on particular image using JQuery in asp.net.

Description:

In previous post I explained about JQuery Image slideshow gallery to display images slideshow. Now in this article I will explain how to increase size of image or implement zoom effect for image when we click on particular image in asp.net.

In some of websites generally we will see different types of image effect like whenever we click on image that will open with zoom effect. After seen that I decided to write post to use JQuery plugin to implement beautiful Zoom effect for images in asp.net.

To implement this one I am using previous post insert and display images from folder based on imagepath in database because in that post I explained clearly how to insert images into our project folder and insert images path into database and display images in gridview from images folder based on Images path in database.

To implement image Zoom effect first design table in your database as shown below

Column Name	Data Type	Allow Nulls
ID	int(set identity property=true)	No
ImageName	varchar(50)	Yes
Description	nvarchar(max)	Yes

After completion of table creation Open Visual Studio and create new website after that right click on your website and add new folder and give name as SlideImages because here I used same name for my sample if you want to change folder name then you need to change the Slideimages folder name in your code behind also after that write the following code in your aspx page

<head>

<title>jQuery Fancy Zoom plugin</title>

$(function() {

$('#demo > a:first').fancyzoom({ Speed: 400, showoverlay: false });

$('#demo > a:last').fancyzoom({ Speed: 400, showoverlay: false });

$('#nooverlay').fancyzoom({ Speed: 400, showoverlay: false });

$('img.fancyzoom').fancyzoom();

});

</script>

A IMG {border:0;}

A{text-decoration:none;color:#000;}

#pageWrapper{

margin:0 auto;

width:1000px;

border:1px solid #000;

background:#FFF;

padding: 0px 20px 40px 20px;

}

h1{text-align:right;font-size:24px;}

h2{font-size:16px;border-bottom:1px solid #CCC;margin-top:40px;}

h3{font-size:14px;border-bottom:1px solid #CCC;margin-left:40px;}

#demo A {

display:block;

float:left;

width:400px;

text-align:left;

text-decoration:none;

color:#000;

font-size:11px;

}

#demo{

padding-left:200px;

}

#demo ul {text-align:left;color:#000;}

p.code{

margin-left:60px;

}

pre{

margin-left:60px;

background:#CCC;

padding:6px;

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

<td>

Upload Image:

</td>

<td>

<asp:FileUpload ID="fileuploadimages" runat="server" />

</td>

</tr>

<tr>

<td>

Enter Image Desc:

</td>

<td>

<asp:TextBox ID="txtDesc" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />

</td>

</tr>

<tr>

<asp:DataList ID="dlImages" runat="server" RepeatColumns="3" CellPadding="5">

<asp:Image ID="Image1" class="fancyzoom" ImageUrl='<%# Bind("ImageName", "~/SlideImages/{0}") %>' alt='<%#Eval("Description") %>' runat="server" Width="112" Height="84" />

</ItemTemplate>

<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"

VerticalAlign="Bottom" />

</asp:DataList>

</td>

</tr>

</table>

<br />

</div>

</form>

</body>

</html>

If you observe above code in header section I added some of script files and css file by using those files we will get Zoom effect for images. To get those files download attached sample code and use it in your application.

Another thing here we need to know is

<asp:Image ID="Image1" class="fancyzoom" ImageUrl='<%# Bind("ImageName", "~/SlideImages/{0}") %>' alt='<%#Eval("Description") %>' runat="server" Width="112" Height="84" />

C# Code

using System;

using System.Data;

using System.Data.SqlClient;

using System.IO;

After add namespace write the following code

SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true");

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindDataList();

}

protected void BindDataList()

{

con.Open();

//Query to get ImagesName and Description from database

SqlCommand command = new SqlCommand("SELECT ImageName,Description from SlideShowTable", con);

SqlDataAdapter da = new SqlDataAdapter(command);

DataTable dt = new DataTable();

da.Fill(dt);

dlImages.DataSource = dt;

dlImages.DataBind();

con.Close();

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

//Get Filename from fileupload control

string filename = Path.GetFileName(fileuploadimages.PostedFile.FileName);

//Save images into SlideImages folder

fileuploadimages.SaveAs(Server.MapPath("SlideImages/" + filename));

//Open the database connection

con.Open();

//Query to insert images name and Description into database

SqlCommand cmd = new SqlCommand("Insert into SlideShowTable(ImageName,Description) values(@ImageName,@Description)", con);

//Passing parameters to query

cmd.Parameters.AddWithValue("@ImageName", filename);

cmd.Parameters.AddWithValue("@Description", txtDesc.Text);

cmd.ExecuteNonQuery();

//Close dbconnection

con.Close();

txtDesc.Text = string.Empty;

BindDataList();

}

Now run your application and enter images description and upload some of the images using upload control.

http://tympanus.net/codrops/2010/03/07/photo-zoom-out-effect-with-jquery/

Exploring Asp.net, Silverlight,c#,SQL Server,PHP

Pages

Thursday 14 March 2013

Zoom in zoom out images in asp.net

No comments:

Post a Comment