Click here to Skip to main content
12,689,968 members (24,269 online)
Rate this:
Please Sign up or sign in to vote.
See more: ASP.NET
I am displaying images in gridview i want to zoom image and open in center when pointer goes to on that image. How can i do this?
Posted 19-Jan-13 5:38am
Gittu Dash 19-Jan-13 15:00pm
How are you providing data to GridView ?

I mean if you are Customizing columns manually Writing Templates then your requirement could be possible to achieve.

But if you are just using DataSet or any Data Source to automatically provide dat then I don't think your requirement could be achievable.

So plz rply here how you filling up data in GridView ?
Jigar Sangoi 20-Jan-13 2:44am
I am using dataset but it is possible by using template then tell how can I do this
Gittu Dash 20-Jan-13 4:55am
Let me try it.
If getting Successful will post the Code here.

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

This solution will provide you zooming of the image present in GridView whenever mouse pointer hovers over it.

Step-1: Add GridView & Databinding for it according to your requirement.Change "AutoGenerateColumns" property of Gridview to False.
I hope you know how to use Templates to Show data in GridView.
So now add an Image control under Item Template as following:

<asp:TemplateField HeaderText="Employee Image">
    <asp:Image ID="gvImg" runat="server" ImageUrl="~/Images/1.jpg" CssClass="default" />

I've used a CSS Class, which I've provided below & an Image just for demo.You can use them according to your requirement.

Step-2: Write the following jQuery code in your page under Head section:
     width: 75px;
     height: 75px;

<script src="Scripts/jquery-1.8.3.js"></script>
  $(document).ready(function () {
    //Using default CSS Class here for capturing the hover event
    $('.default').each(function () {
      $(this).hover(function () {
        $(this).animate({ width:100,height:120 }, 500);
      function () {
        $(this).animate({ width:75,height:75 }, 250);

Hover event takes 2 Functions.1st one when mouse pointer comes over Image & 2nd Function when mouse pointer goes out of Image control.

Now whenever mouse pointer will come over the Image control present in GridView, it'll zoom in & when mouse pointer goes out it'll zoom out.

Still you didn't get any point feel free to ask.
Jigar Sangoi 24-Jan-13 1:16am
This code works good but problem is that images are resize in that template field only i want to display images in to new window using hover or onclick
Gittu Dash 24-Jan-13 2:05am
See For New Window I don't Have Much Idea.
But Yes if you know how to use Ajax Control Toolkit, then you can use Popup Extender Control for this Purpose.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web01 | 2.8.170113.4 | Last Updated 22 Jan 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100