JQuery fancy Zoom effect for Image in asp.net | JQuery Increase Size of image when click on it in asp.net - ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview

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

By: Suresh Dasari 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

<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" />

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 Email

20 comments :

Anonymous said...: hi; December 29, 2011 at 1:47 AM
Anonymous said...: Very Useful ...; December 30, 2011 at 12:44 AM
Anonymous said...: This comment has been removed by a blog administrator.; January 24, 2012 at 1:08 AM
Anonymous said...: sir you are very best Programmer; March 3, 2012 at 6:52 PM
Anonymous said...: sir thankuuuuuuuuuuuuuuuu derrrrrrrrrrrrrrrrrrrrrr; April 6, 2012 at 3:23 AM
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; April 12, 2012 at 8:27 AM
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; October 5, 2012 at 12:37 AM
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..; October 5, 2012 at 2:00 AM
Unknown said...: plz suresh sir can you send me a image gallery website in asp.net with vb code plz plz plz plz.......; October 12, 2012 at 11:03 AM
Unknown said...: my email id is amanksharma44@gmail.com; October 12, 2012 at 11:04 AM
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; November 3, 2012 at 6:05 AM
Ranjeet said...: Sir u r genius....... Your code is very useful..; January 16, 2013 at 3:29 AM
Unknown said...: @atul,@kamaran

you download that javascript files and copy paste in your project.; April 21, 2013 at 7:59 PM
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!; July 28, 2013 at 5:17 AM
suresh said...: superb suresh; August 29, 2013 at 6:42 AM
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 ??; September 4, 2013 at 6:49 AM
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; October 20, 2013 at 11:06 AM
Unknown said...: Hi Suresh i used your code zoom option is not working please help me @ mail id nirmaltring@gmail.com please; April 6, 2014 at 6:13 AM
Unknown said...: sir i want reduce zoom size in slide show; August 11, 2014 at 10:09 PM
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; August 17, 2019 at 3:11 AM