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.
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.
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.
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 Email
|
|||
|
|
13 comments :
hi
Very Useful ...
sir you are very best Programmer
sir thankuuuuuuuuuuuuuuuu derrrrrrrrrrrrrrrrrrrrrr
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
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
@Atul...
Here everything working fine i hope that problem with your code. Please check your code whether you pass correct image path or not..
plz suresh sir can you send me a image gallery website in asp.net with vb code plz plz plz plz.......
my email id is amanksharma44@gmail.com
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
Sir u r genius....... Your code is very useful..
@atul,@kamaran
you download that javascript files and copy paste in your project.