Pages

Thursday 14 March 2013

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  
 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Fancy Zoom plugin</title>            

<!-- required -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- optional -->
<script type="text/javascript" src="js/jquery.shadow.js"></script>
<script type="text/javascript" src="js/jquery.ifixpng.js"></script>
<script type="text/javascript" src="js/jquery.fancyzoom.min.js"></script>

<script type="text/javascript">
$(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>

<style type="text/css">
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>
<form id="form1" runat="server">
<div id="demo">
<table align="center">
<tr>
<td colspan="2" height="100"></td>
</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>
<td colspan="2">
<asp:DataList ID="dlImages" runat="server" RepeatColumns="3" CellPadding="5">
<ItemTemplate>
<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/

No comments:

Post a Comment