Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery fancy Zoom effect for Image in asp.net | JQuery Increase Size of image when click on it in asp.net

Dec 28, 2011
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" />
In above tag I added class="fancyzoom" this class is used to active Zoom effect for image and alt attribute is used to display image caption.

After completion of aspx page design add following namespaces in code behind

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();
}
VB.NET Code

Imports System.Data
Imports System.Data.SqlClient
Imports System.IO

Partial Class _Default
Inherits System.Web.UI.Page
Private con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindDataList()
End If
End Sub
Protected Sub BindDataList()
con.Open()
'Query to get ImagesName and Description from database
Dim command As New SqlCommand("SELECT ImageName,Description from SlideShowTable", con)
Dim da As New SqlDataAdapter(command)
Dim dt As New DataTable()
da.Fill(dt)
dlImages.DataSource = dt
dlImages.DataBind()
con.Close()
End Sub

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
'Get Filename from fileupload control
Dim filename As String = 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
Dim cmd As 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()
End Sub
End Class
Now run your application and enter images description and upload some of the images using upload control after that your page should be like this 


Now click on any image automatically image will display with zoom effect. Check the below demo

Demo

Download sample code attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

20 comments :

Anonymous said...

hi

Anonymous said...

Very Useful ...

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

sir you are very best Programmer

Anonymous said...

sir thankuuuuuuuuuuuuuuuu derrrrrrrrrrrrrrrrrrrrrr

Kamran Ashfaq said...

i have a problem with this i am unable to change Zoom and CloseBox Image in my Project..

closebox image not showing how can i change the path of image please help

Atul Dhiman said...

Hello Suresh ,

I am using this function for zooming but it is only showing the Description. Zoom functionality not working.
I think you should check it again.

Regards,
Atul

Suresh Dasari said...

@Atul...
Here everything working fine i hope that problem with your code. Please check your code whether you pass correct image path or not..

Unknown said...

plz suresh sir can you send me a image gallery website in asp.net with vb code plz plz plz plz.......

Unknown said...

my email id is amanksharma44@gmail.com

Unknown said...

hiiiiiiiiiiiiii suresh this is atul. Actually i am working on a scrapbook or comment page like in facebook or orkut. So will u please help me in this topic

Ranjeet said...

Sir u r genius....... Your code is very useful..

Unknown said...

@atul,@kamaran

you download that javascript files and copy paste in your project.

Anonymous said...

Yor code is working fine. When i clicked on the image,it zooming whole screen. I wanted to reduce zoom out, height and width. WIll you help me on that.

Thank You!

suresh said...

superb suresh

Anonymous said...

hey sir ,,
i m using handler class for retrieve an image ..
here when i m using this code its not working..
can u say what is class-"" fancyzoom" ???
where was that class ??

Unknown said...

Hi , Suresh I used this code , working good but not showing Close Button image , Zoom image. i also tried your code but in your code problem is same . please solve my problem. where to give path of such image

Unknown said...

Hi Suresh i used your code zoom option is not working please help me @ mail id nirmaltring@gmail.com please

Unknown said...

sir i want reduce zoom size in slide show

Anonymous said...

I use byte code then I convert it to image as
<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("image"))

After that this zoom image function is not working

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.